scichart 3.1.348 → 3.2.434

package/Charting3D/Visuals/Annotations/TooltipSvgAnnotation3D.d.ts

@@ -0,0 +1,88 @@
+import { CoordinateCalculatorBase } from "../../../Charting/Numerics/CoordinateCalculators/CoordinateCalculatorBase";
+import { EAnnotationType } from "../../../Charting/Visuals/Annotations/IAnnotation";
+import { ISvgAnnotationBaseOptions, SvgAnnotationBase } from "../../../Charting/Visuals/Annotations/SvgAnnotationBase";
+import { SeriesInfo3D } from "../RenderableSeries/SeriesInfo3D";
+export declare type TTooltip3DSvgTemplate = (seriesInfo: SeriesInfo3D, svgAnnotation: TooltipSvgAnnotation3D) => string;
+export declare type TTooltip3DDataTemplate = (seriesInfo: SeriesInfo3D, svgAnnotation: TooltipSvgAnnotation3D) => string[];
+export interface ITooltipSvgAnnotation3DOptions extends ISvgAnnotationBaseOptions {
+    title?: string;
+    tooltipSvgTemplate?: TTooltip3DSvgTemplate;
+    containerBackground?: string;
+    textStroke?: string;
+    tooltipLegendTemplate?: TTooltip3DSvgTemplate;
+    tooltipLegendOffsetX?: number;
+    tooltipLegendOffsetY?: number;
+    placementDivId?: string;
+    tooltipDataTemplate?: TTooltip3DDataTemplate;
+}
+/**
+ * A Tooltip Annotation which provides an SVG tooltip over the chart. Used by the {@link TooltipModifier3D}
+ */
+export declare class TooltipSvgAnnotation3D extends SvgAnnotationBase {
+    /** @inheritDoc */
+    readonly type = EAnnotationType.SVG;
+    private titleProperty;
+    private tooltipSvgTemplateProperty;
+    private seriesInfoProperty;
+    private containerBackgroundProperty;
+    private textStrokeProperty;
+    private tooltipLegendTemplateProperty;
+    private tooltipLegendOffsetXProperty;
+    private tooltipLegendOffsetYProperty;
+    private tooltipDataTemplateProperty;
+    private svgLegend;
+    private isDirty;
+    private placementDivIdProperty?;
+    private svgDivRoot?;
+    /**
+     * Creates an instance of the {@link CursorTooltipSvgAnnotation}
+     * @param options
+     */
+    constructor(options: ITooltipSvgAnnotation3DOptions);
+    /**
+     * Gets or sets seriesInfos {@link SeriesInfo} value on the tooltip
+     */
+    get seriesInfo(): SeriesInfo3D;
+    /**
+     * Gets or sets seriesInfos {@link SeriesInfo} value on the tooltip
+     */
+    set seriesInfo(newSeriesInfo: SeriesInfo3D);
+    get title(): string;
+    set title(value: string);
+    get tooltipSvgTemplate(): TTooltip3DSvgTemplate;
+    set tooltipSvgTemplate(value: TTooltip3DSvgTemplate);
+    get tooltipLegendTemplate(): TTooltip3DSvgTemplate;
+    set tooltipLegendTemplate(value: TTooltip3DSvgTemplate);
+    get tooltipDataTemplate(): TTooltip3DDataTemplate;
+    set tooltipDataTemplate(value: TTooltip3DDataTemplate);
+    get containerBackground(): string;
+    set containerBackground(value: string);
+    get tooltipLegendOffsetX(): number;
+    set tooltipLegendOffsetX(value: number);
+    get tooltipLegendOffsetY(): number;
+    set tooltipLegendOffsetY(value: number);
+    get textStroke(): string;
+    set textStroke(value: string);
+    /**
+     * Gets or sets the parent div element reference or id for the Tooltip
+     */
+    get placementDivId(): string;
+    /**
+     * Gets or sets the parent div element reference or id for the Tooltip
+     */
+    set placementDivId(value: string);
+    /**
+     * @inheritDoc
+     */
+    update(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase, xCoordSvgTrans: number, yCoordSvgTrans: number): void;
+    /** @inheritDoc */
+    delete(): void;
+    protected notifyPropertyChanged(propertyName: string): void;
+    /**
+     * @inheritDoc
+     */
+    protected create(xCalc: CoordinateCalculatorBase, yCalc: CoordinateCalculatorBase, xCoordSvgTrans: number, yCoordSvgTrans: number): void;
+    private updateTooltip;
+    private updateLegendTooltip;
+    private updateExternalLegendTooltip;
+}

package/Charting3D/Visuals/Annotations/TooltipSvgAnnotation3D.js

@@ -0,0 +1,291 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipSvgAnnotation3D = void 0;
+var annotationHelpers_1 = require("../../../Charting/Visuals/Annotations/annotationHelpers");
+var IAnnotation_1 = require("../../../Charting/Visuals/Annotations/IAnnotation");
+var SvgAnnotationBase_1 = require("../../../Charting/Visuals/Annotations/SvgAnnotationBase");
+var constants_1 = require("../../../Charting/Visuals/Annotations/constants");
+/**
+ * A Tooltip Annotation which provides an SVG tooltip over the chart. Used by the {@link TooltipModifier3D}
+ */
+var TooltipSvgAnnotation3D = /** @class */ (function (_super) {
+    __extends(TooltipSvgAnnotation3D, _super);
+    /**
+     * Creates an instance of the {@link CursorTooltipSvgAnnotation}
+     * @param options
+     */
+    function TooltipSvgAnnotation3D(options) {
+        var _this = this;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        _this = _super.call(this, options) || this;
+        /** @inheritDoc */
+        _this.type = IAnnotation_1.EAnnotationType.SVG;
+        _this.tooltipLegendOffsetXProperty = 10;
+        _this.tooltipLegendOffsetYProperty = 10;
+        _this.isDirty = true;
+        _this.isHidden = true;
+        _this.titleProperty = (_a = options === null || options === void 0 ? void 0 : options.title) !== null && _a !== void 0 ? _a : _this.titleProperty;
+        _this.tooltipSvgTemplateProperty = (_b = options === null || options === void 0 ? void 0 : options.tooltipSvgTemplate) !== null && _b !== void 0 ? _b : _this.tooltipSvgTemplateProperty;
+        _this.containerBackgroundProperty = (_c = options === null || options === void 0 ? void 0 : options.containerBackground) !== null && _c !== void 0 ? _c : _this.containerBackgroundProperty;
+        _this.textStrokeProperty = (_d = options === null || options === void 0 ? void 0 : options.textStroke) !== null && _d !== void 0 ? _d : _this.textStrokeProperty;
+        _this.tooltipLegendTemplateProperty = (_e = options === null || options === void 0 ? void 0 : options.tooltipLegendTemplate) !== null && _e !== void 0 ? _e : _this.tooltipLegendTemplateProperty;
+        _this.tooltipLegendOffsetXProperty = (_f = options === null || options === void 0 ? void 0 : options.tooltipLegendOffsetX) !== null && _f !== void 0 ? _f : _this.tooltipLegendOffsetXProperty;
+        _this.tooltipLegendOffsetYProperty = (_g = options === null || options === void 0 ? void 0 : options.tooltipLegendOffsetY) !== null && _g !== void 0 ? _g : _this.tooltipLegendOffsetYProperty;
+        _this.placementDivIdProperty = (_h = options === null || options === void 0 ? void 0 : options.placementDivId) !== null && _h !== void 0 ? _h : _this.placementDivId;
+        _this.tooltipDataTemplateProperty = options === null || options === void 0 ? void 0 : options.tooltipDataTemplate;
+        if (_this.placementDivId) {
+            var svgRoot = document.getElementById(_this.placementDivId);
+            _this.svgDivRoot = svgRoot;
+        }
+        return _this;
+    }
+    Object.defineProperty(TooltipSvgAnnotation3D.prototype, "seriesInfo", {
+        /**
+         * Gets or sets seriesInfos {@link SeriesInfo} value on the tooltip
+         */
+        get: function () {
+            return this.seriesInfoProperty;
+        },
+        /**
+         * Gets or sets seriesInfos {@link SeriesInfo} value on the tooltip
+         */
+        set: function (newSeriesInfo) {
+            if (this.seriesInfoProperty !== newSeriesInfo) {
+                this.seriesInfoProperty = newSeriesInfo;
+                this.notifyPropertyChanged(constants_1.PROPERTY.SERIES_INFOS);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TooltipSvgAnnotation3D.prototype, "title", {
+        get: function () {
+            return this.titleProperty;
+        },
+        set: function (value) {
+            if (this.titleProperty !== value) {
+                this.titleProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.TITLE);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TooltipSvgAnnotation3D.prototype, "tooltipSvgTemplate", {
+        get: function () {
+            return this.tooltipSvgTemplateProperty;
+        },
+        set: function (value) {
+            this.tooltipSvgTemplateProperty = value;
+            this.notifyPropertyChanged(constants_1.PROPERTY.TOOLTIP_SVG_TEMPLATE);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TooltipSvgAnnotation3D.prototype, "tooltipLegendTemplate", {
+        get: function () {
+            return this.tooltipLegendTemplateProperty;
+        },
+        set: function (value) {
+            this.tooltipLegendTemplateProperty = value;
+            this.notifyPropertyChanged(constants_1.PROPERTY.TOOLTIP_LEGEND_TEMPLATE);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TooltipSvgAnnotation3D.prototype, "tooltipDataTemplate", {
+        get: function () {
+            return this.tooltipDataTemplateProperty;
+        },
+        set: function (value) {
+            this.tooltipDataTemplateProperty = value;
+            this.notifyPropertyChanged(constants_1.PROPERTY.TOOLTIP_DATA_TEMPLATE);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TooltipSvgAnnotation3D.prototype, "containerBackground", {
+        get: function () {
+            return this.containerBackgroundProperty;
+        },
+        set: function (value) {
+            if (this.containerBackgroundProperty !== value) {
+                this.containerBackgroundProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.CONTAINER_BACKGROUND);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TooltipSvgAnnotation3D.prototype, "tooltipLegendOffsetX", {
+        get: function () {
+            return this.tooltipLegendOffsetXProperty;
+        },
+        set: function (value) {
+            if (this.tooltipLegendOffsetXProperty !== value) {
+                this.tooltipLegendOffsetXProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.TOOLTIP_LEGEND_OFFSET_X);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TooltipSvgAnnotation3D.prototype, "tooltipLegendOffsetY", {
+        get: function () {
+            return this.tooltipLegendOffsetYProperty;
+        },
+        set: function (value) {
+            if (this.tooltipLegendOffsetYProperty !== value) {
+                this.tooltipLegendOffsetYProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.TOOLTIP_LEGEND_OFFSET_Y);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TooltipSvgAnnotation3D.prototype, "textStroke", {
+        get: function () {
+            return this.textStrokeProperty;
+        },
+        set: function (value) {
+            if (this.textStrokeProperty !== value) {
+                this.textStrokeProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.TEXT_STROKE);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TooltipSvgAnnotation3D.prototype, "placementDivId", {
+        /**
+         * Gets or sets the parent div element reference or id for the Tooltip
+         */
+        get: function () {
+            return this.placementDivIdProperty;
+        },
+        /**
+         * Gets or sets the parent div element reference or id for the Tooltip
+         */
+        set: function (value) {
+            if (this.placementDivIdProperty !== value) {
+                this.placementDivIdProperty = value;
+                this.notifyPropertyChanged("PLACEMENT_DIV_ID");
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * @inheritDoc
+     */
+    TooltipSvgAnnotation3D.prototype.update = function (xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans) {
+        if (!this.isDirty)
+            return;
+        this.isDirty = false;
+        if (this.svg) {
+            this.delete();
+        }
+        this.create(xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans);
+        if (this.placementDivId) {
+            this.updateExternalLegendTooltip();
+        }
+        else {
+            this.updateTooltip(xCoordSvgTrans, yCoordSvgTrans);
+            this.updateLegendTooltip();
+        }
+    };
+    /** @inheritDoc */
+    TooltipSvgAnnotation3D.prototype.delete = function () {
+        if (!this.parentSurface || this.parentSurface.isDeleted || !this.svg)
+            return;
+        if (this.placementDivId) {
+            this.svgDivRoot.removeChild(this.svg);
+        }
+        else {
+            this.svgRoot.removeChild(this.svg);
+        }
+        this.setSvg(undefined);
+        if (this.svgLegend) {
+            this.svgRoot.removeChild(this.svgLegend);
+            this.svgLegend = undefined;
+        }
+    };
+    TooltipSvgAnnotation3D.prototype.notifyPropertyChanged = function (propertyName) {
+        _super.prototype.notifyPropertyChanged.call(this, propertyName);
+        this.isDirty = true;
+    };
+    /**
+     * @inheritDoc
+     */
+    TooltipSvgAnnotation3D.prototype.create = function (xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans) {
+        if (!this.tooltipSvgTemplate)
+            throw Error("Please provide a tooltipSvgTemplate for CursorTooltipSvgAnnotation");
+        var svgString = this.tooltipSvgTemplate(this.seriesInfo, this);
+        if (this.placementDivId) {
+            var svgNode = annotationHelpers_1.annotationHelpers.createSvg(svgString, this.svgDivRoot);
+            this.setSvg(svgNode);
+        }
+        else {
+            var svgNode = annotationHelpers_1.annotationHelpers.createSvg(svgString, this.svgRoot);
+            this.setSvg(svgNode);
+        }
+    };
+    TooltipSvgAnnotation3D.prototype.updateTooltip = function (xCoordSvgTrans, yCoordSvgTrans) {
+        var _a, _b, _c, _d;
+        var shiftX = (_a = this.xCoordShift) !== null && _a !== void 0 ? _a : 0;
+        var shiftY = (_b = this.yCoordShift) !== null && _b !== void 0 ? _b : 0;
+        this.svg.style.display = this.isHidden ? "none" : "block";
+        var mousePointX = (_c = this.x1) !== null && _c !== void 0 ? _c : 0;
+        var mousePointY = (_d = this.y1) !== null && _d !== void 0 ? _d : 0;
+        var x1Coord = shiftX + mousePointX + xCoordSvgTrans;
+        var y1Coord = shiftY + mousePointY + yCoordSvgTrans;
+        if (isNaN(x1Coord) || isNaN(y1Coord)) {
+            this.svg.style.display = "none";
+        }
+        else {
+            this.setSvgAttribute("x", x1Coord);
+            this.setSvgAttribute("y", y1Coord);
+        }
+    };
+    TooltipSvgAnnotation3D.prototype.updateLegendTooltip = function () {
+        if (this.tooltipLegendTemplate) {
+            var svgString = this.seriesInfo ? this.tooltipLegendTemplate(this.seriesInfo, this) : "<svg></svg>";
+            if (this.svgLegend) {
+                this.svgRoot.removeChild(this.svgLegend);
+            }
+            var svgNode = annotationHelpers_1.annotationHelpers.createSvg(svgString, this.svgRoot);
+            this.svgLegend = svgNode;
+            this.svgLegend.setAttribute("x", this.tooltipLegendOffsetX.toString());
+            this.svgLegend.setAttribute("y", this.tooltipLegendOffsetY.toString());
+        }
+    };
+    TooltipSvgAnnotation3D.prototype.updateExternalLegendTooltip = function () {
+        if (this.tooltipLegendTemplate) {
+            var svgString = this.seriesInfo
+                ? this.tooltipLegendTemplate(this.seriesInfo, this)
+                : "<svg style='display: none'></svg>";
+            if (this.svgLegend) {
+                this.svgLegend.removeChild(this.svgLegend);
+            }
+            var svgNode = annotationHelpers_1.annotationHelpers.createSvg(svgString, this.svgRoot);
+            this.svgLegend = svgNode;
+        }
+    };
+    return TooltipSvgAnnotation3D;
+}(SvgAnnotationBase_1.SvgAnnotationBase));
+exports.TooltipSvgAnnotation3D = TooltipSvgAnnotation3D;

package/Charting3D/Visuals/Axis/AxisBase3D.d.ts

@@ -1,6 +1,10 @@
+import { TLabelProviderDefinition } from "../../../Builder/buildAxis";
 import { IThemeable } from "../../../Charting/Themes/IThemeable";
 import { IThemeProvider } from "../../../Charting/Themes/IThemeProvider";
 import { AxisCore } from "../../../Charting/Visuals/Axis/AxisCore";
+import { IAxisCoreOptions } from "../../../Charting/Visuals/Axis/IAxisCoreOptions";
+import { ILabelOptions } from "../../../Charting/Visuals/Axis/LabelProvider/LabelProvider";
+import { LabelProviderBase2D } from "../../../Charting/Visuals/Axis/LabelProvider/LabelProviderBase2D";
 import { NumberRange } from "../../../Core/NumberRange";
 import { ObservableArray } from "../../../Core/ObservableArray";
 import { TSciChart3D } from "../../../types/TSciChart3D";
@@ -10,11 +14,34 @@ import { AxisBase3DLabelStyle } from "./AxisBase3DLabelStyle";
 import { EAxisSideClipping } from "./EAxisSideClipping";
 import { ETextAlignment3D } from "./ETextAlignment3D";
 import { IAxisDescriptor } from "./IAxisDescriptor";
-import { IAxisCoreOptions } from "../../../Charting/Visuals/Axis/IAxisCoreOptions";
 /**
  * Optional parameters passed to {@link AxisBase3D} constructor to set defaults at construction time
  */
-export interface IAxisBase3dOptions extends IAxisCoreOptions {
+export interface IAxisBase3dOptions extends IAxisCoreOptions, ILabelOptions {
+    /**
+     * Gets or sets tick labels offset from the axis plane
+     */
+    tickLabelsOffset?: number;
+    /**
+     * Gets or sets title text offset from the axis plane
+     */
+    titleOffset?: number;
+    /**
+     * Sets the Plane border color as an HTML Color string
+     */
+    planeBorderColor?: string;
+    /**
+     * Sets the plane border thickness in world units
+     */
+    planeBorderThickness?: number;
+    /**
+     * Sets the plane background color as an HTML Color string
+     */
+    planeBackgroundFill?: string;
+    /**
+     * Sets a {@link LabelProvider} - a class which is responsible for formatting axis labels and cursor labels from numeric values
+     */
+    labelProvider?: LabelProviderBase2D | TLabelProviderDefinition;
 }
 /**
  * Which axis - used for calculations
@@ -55,7 +82,6 @@ export declare abstract class AxisBase3D extends AxisCore implements IThemeable
     private isYAxisProperty;
     private isZAxisProperty;
     private titleOffsetProperty;
-    private backgroundColorProperty;
     private tickLabelsOffsetProperty;
     /**
      * Creates an instance of the {@link AxisBase3D}

package/Charting3D/Visuals/Axis/AxisBase3D.js

@@ -17,11 +17,12 @@ var __extends = (this && this.__extends) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AxisBase3D = exports.EWhichAxis = void 0;
 var AxisCore_1 = require("../../../Charting/Visuals/Axis/AxisCore");
+var SciChartSurfaceBase_1 = require("../../../Charting/Visuals/SciChartSurfaceBase");
+var DpiHelper_1 = require("../../../Charting/Visuals/TextureManager/DpiHelper");
 var NumberRange_1 = require("../../../Core/NumberRange");
 var parseColor_1 = require("../../../utils/parseColor");
 var AxisBase3DLabelStyle_1 = require("./AxisBase3DLabelStyle");
 var constants_1 = require("./constants");
-var DpiHelper_1 = require("../../../Charting/Visuals/TextureManager/DpiHelper");
 /**
  * Which axis - used for calculations
  */
@@ -51,30 +52,57 @@ var AxisBase3D = /** @class */ (function (_super) {
      * @protected
      */
     function AxisBase3D(webAssemblyContext, options) {
-        var _this = _super.call(this, options) || this;
+        var _this = this;
+        var _a, _b, _c, _d, _e;
+        _this = _super.call(this, options) || this;
         _this.labelDepthTestEnabledProperty = false;
-        _this.planeBorderThicknessProperty = 2;
+        _this.planeBorderColorProperty = SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.planeBorderColor;
+        _this.axisPlaneBackgroundFillProperty = SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.axisPlaneBackgroundFill;
         _this.isYAxisProperty = false;
         _this.isZAxisProperty = false;
-        _this.titleOffsetProperty = 50;
-        _this.backgroundColorProperty = "black";
-        _this.tickLabelsOffsetProperty = 10;
         _this.labelStyle = new AxisBase3DLabelStyle_1.AxisBase3DLabelStyle(_this);
         _this.webAssemblyContext3D = webAssemblyContext;
         _this.isXAxisProperty = false;
+        _this.tickLabelsOffsetProperty = (_a = options === null || options === void 0 ? void 0 : options.tickLabelsOffset) !== null && _a !== void 0 ? _a : 10;
+        _this.titleOffsetProperty = (_b = options === null || options === void 0 ? void 0 : options.titleOffset) !== null && _b !== void 0 ? _b : 50;
+        _this.planeBorderColorProperty = (_c = options === null || options === void 0 ? void 0 : options.planeBorderColor) !== null && _c !== void 0 ? _c : _this.planeBorderColorProperty;
+        _this.planeBorderThicknessProperty = (_d = options === null || options === void 0 ? void 0 : options.planeBorderThickness) !== null && _d !== void 0 ? _d : 2;
+        _this.axisPlaneBackgroundFillProperty = (_e = options === null || options === void 0 ? void 0 : options.planeBackgroundFill) !== null && _e !== void 0 ? _e : _this.axisPlaneBackgroundFillProperty;
         return _this;
     }
     /**
      * @inheritDoc
      */
     AxisBase3D.prototype.applyTheme = function (themeProvider) {
-        this.labelStyle.foreground = themeProvider.labelForegroundBrush;
-        this.axisBandsFill = themeProvider.axisBandsFill;
-        this.majorGridLineStyle = { color: themeProvider.majorGridLineBrush };
-        this.majorTickLineStyle = { color: themeProvider.majorGridLineBrush };
-        this.minorGridLineStyle = { color: themeProvider.minorGridLineBrush };
-        this.minorTickLineStyle = { color: themeProvider.minorGridLineBrush };
-        this.axisTitleStyle = { color: themeProvider.axisTitleColor };
+        var _a, _b, _c, _d, _e, _f;
+        var previousThemeProvider = this.parentSurface.previousThemeProvider;
+        if (((_a = this.labelStyle) === null || _a === void 0 ? void 0 : _a.foreground) === previousThemeProvider.labelForegroundBrush) {
+            this.labelStyle.foreground = themeProvider.labelForegroundBrush;
+        }
+        if (this.axisBandsFill === previousThemeProvider.axisBandsFill) {
+            this.axisBandsFill = themeProvider.axisBandsFill;
+        }
+        if (((_b = this.majorGridLineStyle) === null || _b === void 0 ? void 0 : _b.color) === previousThemeProvider.majorGridLineBrush) {
+            this.majorGridLineStyle = { color: themeProvider.majorGridLineBrush };
+        }
+        if (((_c = this.majorTickLineStyle) === null || _c === void 0 ? void 0 : _c.color) === previousThemeProvider.majorGridLineBrush) {
+            this.majorTickLineStyle = { color: themeProvider.majorGridLineBrush };
+        }
+        if (((_d = this.minorGridLineStyle) === null || _d === void 0 ? void 0 : _d.color) === previousThemeProvider.minorGridLineBrush) {
+            this.minorGridLineStyle = { color: themeProvider.minorGridLineBrush };
+        }
+        if (((_e = this.minorTickLineStyle) === null || _e === void 0 ? void 0 : _e.color) === previousThemeProvider.minorGridLineBrush) {
+            this.minorTickLineStyle = { color: themeProvider.minorGridLineBrush };
+        }
+        if (((_f = this.axisTitleStyle) === null || _f === void 0 ? void 0 : _f.color) === previousThemeProvider.axisTitleColor) {
+            this.axisTitleStyle = { color: themeProvider.axisTitleColor };
+        }
+        if (this.planeBorderColor === previousThemeProvider.planeBorderColor) {
+            this.planeBorderColor = themeProvider.planeBorderColor;
+        }
+        if (this.axisPlaneBackgroundFill === previousThemeProvider.axisPlaneBackgroundFill) {
+            this.axisPlaneBackgroundFill = themeProvider.axisPlaneBackgroundFill;
+        }
     };
     Object.defineProperty(AxisBase3D.prototype, "isYAxis", {
         /**
@@ -259,13 +287,13 @@ var AxisBase3D = /** @class */ (function (_super) {
          * Gets or sets the color of the background of the axis plane as an HTML Color code
          */
         get: function () {
-            return this.backgroundColorProperty;
+            return this.axisPlaneBackgroundFill;
         },
         /**
          * Gets or sets the color of the background of the axis plane as an HTML Color code
          */
         set: function (value) {
-            this.backgroundColorProperty = value;
+            this.axisPlaneBackgroundFill = value;
             this.notifyPropertyChanged(constants_1.PROPERTY.BACKGROUND_COLOR);
         },
         enumerable: false,
@@ -299,7 +327,7 @@ var AxisBase3D = /** @class */ (function (_super) {
      * to pass to the WebAssembly 3D Engine for drawing this axis
      */
     AxisBase3D.prototype.toAxisDescriptor = function () {
-        var defaultColor = "black";
+        var defaultColor = "transparent";
         var defaultBandsColor = "#202123";
         var _a = this.getTickCoordsAndLabels(), majorTickCoords = _a.majorTickCoords, minorTickCoords = _a.minorTickCoords, majorTickLabels = _a.majorTickLabels;
         // @ts-ignore
@@ -307,9 +335,9 @@ var AxisBase3D = /** @class */ (function (_super) {
         var descriptor = {
             axisTitle: Array.isArray(this.axisTitle) ? this.axisTitle.join(" ") : this.axisTitle,
             axisSize: this.getAxisSize(),
-            backgroundColor: (0, parseColor_1.parseColorToUIntArgb)(this.backgroundColor || defaultColor),
+            backgroundColor: (0, parseColor_1.parseColorToTArgb)(this.axisPlaneBackgroundFill || defaultColor),
             bandColor: (0, parseColor_1.parseColorToTArgb)(this.axisBandsFill || defaultBandsColor),
-            borderColor: (0, parseColor_1.parseColorToUIntArgb)(this.planeBorderColor || defaultColor),
+            borderColor: (0, parseColor_1.parseColorToTArgb)(this.planeBorderColor || defaultColor),
             borderThickness: this.planeBorderThickness,
             drawBands: this.drawMajorBands,
             drawMajorGridlines: this.drawMajorGridLines,

package/Charting3D/Visuals/Axis/AxisBase3DLabelStyle.js

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AxisBase3DLabelStyle = void 0;
+var SciChartSurfaceBase_1 = require("../../../Charting/Visuals/SciChartSurfaceBase");
 var constants_1 = require("./constants");
 var AxisBase3DLabelStyle = /** @class */ (function () {
     function AxisBase3DLabelStyle(parentAxis) {
         this.dpiScalingProperty = 96;
         this.fontFamilyProperty = "Arial";
         this.fontSizeProperty = 14;
-        this.foregroundProperty = "#c8c7c3";
+        this.foregroundProperty = SciChartSurfaceBase_1.SciChartSurfaceBase.DEFAULT_THEME.labelForegroundBrush;
         this.parentAxis = parentAxis;
     }
     Object.defineProperty(AxisBase3DLabelStyle.prototype, "alignment", {

package/Charting3D/Visuals/Axis/AxisCubeEntity.d.ts

@@ -24,10 +24,6 @@ export declare class AxisCubeEntity extends BaseSceneEntity3D<SCRTAxisCubeEntity
      * @param sciChart3DSurface The {@link SciChart3DSurface} associated with the axis cube
      */
     constructor(webAssemblyContext: TSciChart3D, sciChart3DSurface: SciChart3DSurface);
-    /**
-     * @inheritDoc
-     */
-    delete(): void;
     /**
      * @inheritDoc
      */

package/Charting3D/Visuals/Axis/AxisCubeEntity.js

@@ -42,12 +42,6 @@ var AxisCubeEntity = /** @class */ (function (_super) {
         _this.setNativeEntity(webAssemblyContext.SCRTAxisCubeEntity.implement(_this));
         return _this;
     }
-    /**
-     * @inheritDoc
-     */
-    AxisCubeEntity.prototype.delete = function () {
-        _super.prototype.delete.call(this);
-    };
     /**
      * @inheritDoc
      */
@@ -109,6 +103,9 @@ var updateScrtAxisDescriptor = function (wasmContext, scrtAxisDesc, axisDesc) {
     scrtAxisDesc.m_bMajorTicksEnabled = axisDesc.drawMajorTicks;
     scrtAxisDesc.m_bMinorLinesEnabled = axisDesc.drawMinorGridlines;
     scrtAxisDesc.m_bMinorTicksEnabled = axisDesc.drawMinorTicks;
+    scrtAxisDesc.m_fBorderThickness = axisDesc.borderThickness;
+    (0, tsrExtensions_1.updateTsrVector4)(axisDesc.borderColor, scrtAxisDesc.GetBorderColorPtr());
+    (0, tsrExtensions_1.updateTsrVector4)(axisDesc.backgroundColor, scrtAxisDesc.GetBackgroundColorPtr());
     (0, tsrExtensions_1.updateTsrVector4)(axisDesc.bandColor, scrtAxisDesc.GetBandColorPtr());
     (0, exports.updateScrtLineStyle)(axisDesc.majorLineStyle, scrtAxisDesc.GetMajorLineStylePtr());
     (0, exports.updateScrtLineStyle)(axisDesc.minorLineStyle, scrtAxisDesc.GetMinorLineStylePtr());

package/Charting3D/Visuals/Axis/IAxisDescriptor.d.ts

@@ -17,7 +17,7 @@ export interface IAxisDescriptor {
     /**
      * The background color as an ARGB color represented as UInt32
      */
-    backgroundColor: number;
+    backgroundColor: TArgb;
     /**
      * The Axis Band color as ARGB represented as UInt32
      */
@@ -25,7 +25,7 @@ export interface IAxisDescriptor {
     /**
      * The Axis Border color as ARGB represented as UInt32
      */
-    borderColor: number;
+    borderColor: TArgb;
     /**
      * Major tick / gridline and label coordinates in world-coordinates
      */

package/Charting3D/Visuals/Axis/IAxisDescriptor.js

@@ -15,9 +15,9 @@ function getDescriptorsEqual(a, b) {
     }
     return (a.axisTitle === b.axisTitle &&
         a.axisSize === b.axisSize &&
-        a.backgroundColor === b.backgroundColor &&
+        getTArgbEqual(a.backgroundColor, b.backgroundColor) &&
         getTArgbEqual(a.bandColor, b.bandColor) &&
-        a.borderColor === b.borderColor &&
+        getTArgbEqual(a.borderColor, b.borderColor) &&
         getArraysEqual(a.majorCoordinates, b.majorCoordinates) &&
         getArraysEqual(a.minorCoordinates, b.minorCoordinates) &&
         getArraysEqual(a.tickLabels, b.tickLabels) &&

package/Charting3D/Visuals/Axis/NumericAxis3D.d.ts

@@ -2,11 +2,12 @@ import { CoordinateCalculatorBase } from "../../../Charting/Numerics/CoordinateC
 import { TEasingFn } from "../../../Core/Animations/EasingFunctions";
 import { NumberRange } from "../../../Core/NumberRange";
 import { EAxisType } from "../../../types/AxisType";
-import { ENumericFormat } from "../../../types/NumericFormat";
 import { TSciChart3D } from "../../../types/TSciChart3D";
 import { AxisBase3D, IAxisBase3dOptions } from "./AxisBase3D";
 interface INumericAxis3dOptions extends IAxisBase3dOptions {
-    labelFormat?: ENumericFormat;
+    /**
+     * @deprecated use labelPrecision instead
+     */
     precision?: number;
 }
 /**