scichart 2.1.2301 → 2.2.2351

package/Charting/Visuals/SciChartPieSurface/SciChartPieSurface.js

@@ -9,22 +9,24 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addEventListenerToPieSegment = exports.SciChartPieSurface = exports.EPieType = exports.ESizingMode = void 0;
+exports.addEventListenerToPieSegment = exports.SciChartPieSurface = exports.EPieValueMode = exports.EPieType = exports.ESizingMode = void 0;
 var chartBuilder_1 = require("../../../Builder/chartBuilder");
 var createMaster3d_1 = require("../../../Charting3D/Visuals/createMaster3d");
 var app_1 = require("../../../constants/app");
+var EasingFunctions_1 = require("../../../Core/Animations/EasingFunctions");
 var Deleter_1 = require("../../../Core/Deleter");
 var ObservableArray_1 = require("../../../Core/ObservableArray");
 var Rect_1 = require("../../../Core/Rect");
 var SciChartSurfaceType_1 = require("../../../types/SciChartSurfaceType");
 var SciChartJSDarkTheme_1 = require("../../Themes/SciChartJSDarkTheme");
+var PieLabelProvider_1 = require("../Axis/LabelProvider/PieLabelProvider");
 var createMaster_1 = require("../createMaster");
 var createSingle_1 = require("../createSingle");
 var SciChartPieLegend_1 = require("../Legend/SciChartPieLegend");
 var sciChartInitCommon_1 = require("../sciChartInitCommon");
 var SciChartSurfaceBase_1 = require("../SciChartSurfaceBase");
 var constants_1 = require("./constants");
-var PieSegment_1 = require("./PieSegment/PieSegment");
+var constants_2 = require("./PieSegment/constants");
 /** @ignore */
 var DEG_TO_RAD = Math.PI / 180;
 /** @ignore */
@@ -45,6 +47,11 @@ var EPieType;
     EPieType["Pie"] = "Pie";
     EPieType["Donut"] = "Donut";
 })(EPieType = exports.EPieType || (exports.EPieType = {}));
+var EPieValueMode;
+(function (EPieValueMode) {
+    EPieValueMode[EPieValueMode["Percentage"] = 0] = "Percentage";
+    EPieValueMode[EPieValueMode["Raw"] = 1] = "Raw";
+})(EPieValueMode = exports.EPieValueMode || (exports.EPieValueMode = {}));
 /**
  * @summary The {@link SciChartPieSurface} is the root Pie and Donut Chart control in SciChart's High Performance Real-time
  * {@link https://www.scichart.com/javascript-chart-features | JavaScript Chart Library}
@@ -64,24 +71,30 @@ var SciChartPieSurface = /** @class */ (function () {
     function SciChartPieSurface(canvases, options) {
         var _this = this;
         if (canvases === void 0) { canvases = {}; }
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         this.animate = true;
+        /* The number of frames for the animation. Default 30.  A frame will be trigged every 20ms. */
+        this.animationFrames = 30;
         this.pieTypeProperty = EPieType.Pie;
         this.holeRadiusProperty = 0.5;
         this.holeRadiusSizingModeProperty = ESizingMode.Relative;
         this.seriesSpacingProperty = 0;
+        this.labelRadiusProperty = 1;
         this.titleDivs = [];
         this.sweepAnimationDone = false;
         this.suspendUpdate = false;
         this.themeProviderProperty = new SciChartJSDarkTheme_1.SciChartJSDarkTheme();
         this.previousThemeProviderProperty = new SciChartJSDarkTheme_1.SciChartJSDarkTheme();
         this.deletables = [];
+        this.valueModeProperty = EPieValueMode.Percentage;
         this.domChartRoot = canvases.domChartRoot;
         this.domCanvas2D = canvases.domCanvas2D;
         this.domSvgContainer = canvases.domSvgContainer;
         this.domSvgAdornerLayer = canvases.domSvgAdornerLayer;
         this.domDivContainer = canvases.domDivContainer;
-        this.viewRect = new Rect_1.Rect(0, 0, this.domCanvas2D.width, this.domCanvas2D.height);
+        var width = this.domCanvas2D.width;
+        var height = this.domCanvas2D.height;
+        this.viewRect = new Rect_1.Rect(0, 0, width, height);
         this.drawChart = this.drawChart.bind(this);
         this.delete = this.delete.bind(this);
         this.invalidateElement = this.invalidateElement.bind(this);
@@ -105,11 +118,14 @@ var SciChartPieSurface = /** @class */ (function () {
         this.holeRadiusProperty = (_d = options === null || options === void 0 ? void 0 : options.holeRadius) !== null && _d !== void 0 ? _d : this.holeRadius;
         this.animate = (_e = options === null || options === void 0 ? void 0 : options.animate) !== null && _e !== void 0 ? _e : this.animate;
         this.holeRadiusSizingModeProperty = (_f = options === null || options === void 0 ? void 0 : options.holeRadiusSizingMode) !== null && _f !== void 0 ? _f : this.holeRadiusSizingModeProperty;
-        // this.seriesSpacingProperty = options?.seriesSpacing ?? this.seriesSpacingProperty;
-        this.legend.showLegend = (_g = options === null || options === void 0 ? void 0 : options.showLegend) !== null && _g !== void 0 ? _g : this.legend.showLegend;
-        this.legend.animate = (_h = options === null || options === void 0 ? void 0 : options.animateLegend) !== null && _h !== void 0 ? _h : this.legend.animate;
-        this.legend.showCheckboxes = (_j = options === null || options === void 0 ? void 0 : options.showLegendCheckBoxes) !== null && _j !== void 0 ? _j : this.legend.showCheckboxes;
-        this.legend.showSeriesMarkers = (_k = options === null || options === void 0 ? void 0 : options.showLegendSeriesMarkers) !== null && _k !== void 0 ? _k : this.legend.showSeriesMarkers;
+        this.seriesSpacingProperty = (_g = options === null || options === void 0 ? void 0 : options.seriesSpacing) !== null && _g !== void 0 ? _g : this.seriesSpacingProperty;
+        this.legend.showLegend = (_h = options === null || options === void 0 ? void 0 : options.showLegend) !== null && _h !== void 0 ? _h : this.legend.showLegend;
+        this.legend.animate = (_j = options === null || options === void 0 ? void 0 : options.animateLegend) !== null && _j !== void 0 ? _j : this.legend.animate;
+        this.legend.showCheckboxes = (_k = options === null || options === void 0 ? void 0 : options.showLegendCheckBoxes) !== null && _k !== void 0 ? _k : this.legend.showCheckboxes;
+        this.legend.showSeriesMarkers = (_l = options === null || options === void 0 ? void 0 : options.showLegendSeriesMarkers) !== null && _l !== void 0 ? _l : this.legend.showSeriesMarkers;
+        this.paddingProperty = (_m = options === null || options === void 0 ? void 0 : options.padding) !== null && _m !== void 0 ? _m : this.paddingProperty;
+        this.labelProvider = (_o = options === null || options === void 0 ? void 0 : options.labelProvider) !== null && _o !== void 0 ? _o : new PieLabelProvider_1.PieLabelProvider();
+        this.valueModeProperty = (_p = options === null || options === void 0 ? void 0 : options.valueMode) !== null && _p !== void 0 ? _p : this.valueModeProperty;
     }
     /**
      * Creates a {@link SciChartPieSurface} to occupy the div by element ID in your DOM.
@@ -134,6 +150,25 @@ var SciChartPieSurface = /** @class */ (function () {
             setTimeout(function () { return resolve(scps); }, 0);
         });
     };
+    Object.defineProperty(SciChartPieSurface.prototype, "labelProvider", {
+        /**
+         * Gets or sets a {@link LabelProvider} - a class which is responsible for formatting axis labels and cursor labels from numeric values
+         */
+        get: function () {
+            return this.labelProviderProperty;
+        },
+        /**
+         * Gets or sets a {@link LabelProvider} - a class which is responsible for formatting axis labels and cursor labels from numeric values
+         */
+        set: function (labelProvider) {
+            if (this.labelProviderProperty !== labelProvider) {
+                this.labelProviderProperty = labelProvider;
+                this.notifyPropertyChanged(constants_1.PROPERTY.LABEL_PROVIDER);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * @inheritDoc
      */
@@ -167,8 +202,11 @@ var SciChartPieSurface = /** @class */ (function () {
      * Call invalidateElement() to trigger a redraw of the {@link SciChartPieSurface}. SciChart's rendering
      * engine will schedule a redraw a the next time the renderer is free.
      */
-    SciChartPieSurface.prototype.invalidateElement = function () {
+    SciChartPieSurface.prototype.invalidateElement = function (propertyName) {
         if (this.isValidToDraw()) {
+            if (propertyName === constants_2.PROPERTY.VALUE) {
+                this.sweepAnimationDone = false;
+            }
             this.update();
         }
     };
@@ -178,6 +216,8 @@ var SciChartPieSurface = /** @class */ (function () {
     SciChartPieSurface.prototype.update = function () {
         if (!this.suspendUpdate) {
             this.draw();
+            var width = this.calculateViewRectWidth(this.viewRect.width);
+            var height = this.calculateViewRectHeight(this.viewRect.height);
             this.legend.setSeriesViewRect(this.viewRect);
             this.legend.update();
         }
@@ -185,16 +225,18 @@ var SciChartPieSurface = /** @class */ (function () {
     /**
      * @inheritDoc
      */
-    SciChartPieSurface.prototype.delete = function () {
+    SciChartPieSurface.prototype.delete = function (isAnimationProgress) {
         var _this = this;
         if (this.svg) {
             this.domSvgContainer.removeChild(this.svg);
             this.svg = undefined;
         }
-        this.titleDivs.forEach(function (divEl) {
-            _this.domDivContainer.removeChild(divEl);
-        });
-        this.titleDivs = [];
+        if (!isAnimationProgress) {
+            this.titleDivs.forEach(function (divEl) {
+                _this.domDivContainer.removeChild(divEl);
+            });
+            this.titleDivs = [];
+        }
         for (var _i = 0, _a = this.deletables; _i < _a.length; _i++) {
             var deletable = _a[_i];
             (0, Deleter_1.deleteSafe)(deletable);
@@ -211,8 +253,10 @@ var SciChartPieSurface = /** @class */ (function () {
      * @inheritDoc
      */
     SciChartPieSurface.prototype.changeViewportSize = function (width, height) {
+        var domWidth = width;
+        var domHeight = height;
         this.viewRect = new Rect_1.Rect(0, 0, width, height);
-        this.changeDomViewportSize(width, height);
+        this.changeDomViewportSize(domWidth, domHeight);
         this.invalidateElement();
     };
     Object.defineProperty(SciChartPieSurface.prototype, "pieType", {
@@ -279,6 +323,92 @@ var SciChartPieSurface = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(SciChartPieSurface.prototype, "padding", {
+        /**
+         * Gets or sets padding
+         */
+        get: function () {
+            return this.paddingProperty;
+        },
+        /**
+         * Gets or sets padding
+         */
+        set: function (value) {
+            if (this.paddingProperty !== value) {
+                this.paddingProperty = value;
+                this.updateLegendMargin();
+                this.notifyPropertyChanged(constants_1.PROPERTY.PADDING);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SciChartPieSurface.prototype, "canvasBorder", {
+        /**
+         * Gets or sets canvas border
+         */
+        get: function () {
+            return this.canvasBorderProperty;
+        },
+        /**
+         * Gets or sets canvas border
+         */
+        set: function (value) {
+            if (this.canvasBorderProperty !== value) {
+                this.canvasBorderProperty = value;
+                this.updateLegendMargin();
+                this.notifyPropertyChanged(constants_1.PROPERTY.PADDING);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SciChartPieSurface.prototype, "seriesSpacing", {
+        get: function () {
+            return this.seriesSpacingProperty;
+        },
+        set: function (value) {
+            if (this.seriesSpacingProperty !== value) {
+                this.seriesSpacingProperty = value;
+                this.notifyPropertyChanged(constants_1.PROPERTY.SERIES_SPACING);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SciChartPieSurface.prototype, "valueMode", {
+        /** Whether to show labels as percentages, or raw values.  Default to percentages */
+        get: function () {
+            return this.valueModeProperty;
+        },
+        /** Whether to show labels as percentages, or raw values.  Default to percentages */
+        set: function (value) {
+            this.valueModeProperty = value;
+            this.notifyPropertyChanged(constants_1.PROPERTY.VALUE_MODE);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SciChartPieSurface.prototype, "labelRadiusAdjustment", {
+        /**
+         * Use this to adjust the position of the labels.  1 is the default.  Larger values will shift the labels outwards.
+         * For Pie charts, 1.7 will place the labels outside the pie
+         * If you want more detailed control you can override calcTitlePosition.
+         */
+        get: function () {
+            return this.labelRadiusProperty;
+        },
+        /**
+         * Use this to adjust the position of the labels.  1 is the default.  Larger values will shift the labels outwards.
+         * If you want more detailed control you can override calcTitlePosition.
+         */
+        set: function (value) {
+            this.labelRadiusProperty = value;
+            this.notifyPropertyChanged(constants_1.PROPERTY.VALUE_MODE);
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * Convert the surface to a {@link TSurfaceDefinition}
      * @param excludedata If false, segments will be included in the json
@@ -304,6 +434,13 @@ var SciChartPieSurface = /** @class */ (function () {
             showLegend: this.legend.showLegend,
             showLegendCheckBoxes: this.legend.showCheckboxes,
             showLegendSeriesMarkers: this.legend.showSeriesMarkers,
+            padding: this.padding,
+            canvasBorder: this.canvasBorder,
+            seriesSpacing: this.seriesSpacing,
+            labelProvider: this.labelProvider,
+            valueMode: this.valueMode,
+            labelRadiusAdjustment: this.labelRadiusAdjustment,
+            animationFrames: this.animationFrames,
             theme: theme
         };
         var options = { surface: surface, onCreated: this.onCreatedName };
@@ -312,14 +449,14 @@ var SciChartPieSurface = /** @class */ (function () {
         }
         return { type: SciChartSurfaceType_1.ESciChartSurfaceType.Pie2D, options: options };
     };
-    // TODO do something with this
-    // public get seriesSpacing() {
-    //     return this.seriesSpacingProperty;
-    // }
-    // public set seriesSpacing(value) {
-    //     this.seriesSpacingProperty = value;
-    //     this.notifyPropertyChanged(PROPERTY.SERIES_SPACING);
-    // }
+    /** The method used to calculate the label position for each segment */
+    SciChartPieSurface.prototype.calcTitlePosition = function (x, y, outerRadius, innerRadius, a1, a2, delta, divWidth, divHeight) {
+        var centerRadius = innerRadius < outerRadius / 2 ? (outerRadius * 2) / 3 + innerRadius / 6 : (outerRadius + innerRadius) / 2;
+        var centerAngle = (a1 + a2) / 2;
+        var left = x + Math.cos(DEG_TO_RAD * centerAngle) * (centerRadius * this.labelRadiusProperty + delta) - divWidth / 2;
+        var top = y + Math.sin(DEG_TO_RAD * centerAngle) * (centerRadius * this.labelRadiusProperty + delta) - divHeight / 2;
+        return { left: left, top: top };
+    };
     /**
      * Changes the size of the DOM element where the {@link SciChartSurfaceBase} resides.
      * @param width
@@ -348,6 +485,9 @@ var SciChartPieSurface = /** @class */ (function () {
     // PRIVATE
     SciChartPieSurface.prototype.notifyPropertyChanged = function (propertyName) {
         this.invalidateElement();
+        if (propertyName === constants_1.PROPERTY.LABEL_PROVIDER) {
+            this.labelProvider.attachedToSurface(this);
+        }
     };
     SciChartPieSurface.prototype.isValidToDraw = function () {
         // TODO
@@ -361,6 +501,56 @@ var SciChartPieSurface = /** @class */ (function () {
         pieSegment.onAttach(this);
         this.invalidateElement();
     };
+    SciChartPieSurface.prototype.updateLegendMargin = function () {
+        var _a, _b, _c;
+        var paddingTop = ((_a = this.padding) === null || _a === void 0 ? void 0 : _a.top) || 0;
+        var canvasBorderTop = ((_b = this.canvasBorder) === null || _b === void 0 ? void 0 : _b.border) || ((_c = this.canvasBorder) === null || _c === void 0 ? void 0 : _c.borderTop) || 0;
+        // 10 - because of default spacing
+        // only top included because of margin implementation for the legend
+        this.legend.margin = paddingTop + canvasBorderTop + 10;
+    };
+    SciChartPieSurface.prototype.calculateViewRectWidth = function (width) {
+        var _a, _b, _c, _d, _e;
+        if ((_a = this.padding) === null || _a === void 0 ? void 0 : _a.left) {
+            width -= this.padding.left;
+        }
+        if ((_b = this.padding) === null || _b === void 0 ? void 0 : _b.right) {
+            width -= this.padding.right;
+        }
+        if ((_c = this.canvasBorder) === null || _c === void 0 ? void 0 : _c.border) {
+            width -= this.canvasBorder.border * 2;
+        }
+        else {
+            if ((_d = this.canvasBorder) === null || _d === void 0 ? void 0 : _d.borderLeft) {
+                width -= this.canvasBorder.borderLeft;
+            }
+            if ((_e = this.canvasBorder) === null || _e === void 0 ? void 0 : _e.borderRight) {
+                width -= this.canvasBorder.borderRight;
+            }
+        }
+        return width;
+    };
+    SciChartPieSurface.prototype.calculateViewRectHeight = function (height) {
+        var _a, _b, _c, _d, _e;
+        if ((_a = this.padding) === null || _a === void 0 ? void 0 : _a.top) {
+            height -= this.padding.top;
+        }
+        if ((_b = this.padding) === null || _b === void 0 ? void 0 : _b.bottom) {
+            height -= this.padding.bottom;
+        }
+        if ((_c = this.canvasBorder) === null || _c === void 0 ? void 0 : _c.border) {
+            height -= this.canvasBorder.border * 2;
+        }
+        else {
+            if ((_d = this.canvasBorder) === null || _d === void 0 ? void 0 : _d.borderTop) {
+                height -= this.canvasBorder.borderTop;
+            }
+            if ((_e = this.canvasBorder) === null || _e === void 0 ? void 0 : _e.borderBottom) {
+                height -= this.canvasBorder.borderBottom;
+            }
+        }
+        return height;
+    };
     SciChartPieSurface.prototype.draw = function () {
         var _this = this;
         if (this.sweepAnimationDone || !this.animate) {
@@ -368,7 +558,7 @@ var SciChartPieSurface = /** @class */ (function () {
             this.drawChart();
         }
         else {
-            var frames_1 = 30;
+            var frames_1 = this.animationFrames;
             this.suspendUpdate = true;
             var setSuspendUpdateFalse_1 = function () { return (_this.suspendUpdate = false); };
             var setSweepAnimationDone_1 = function () { return (_this.sweepAnimationDone = true); };
@@ -378,7 +568,7 @@ var SciChartPieSurface = /** @class */ (function () {
             (function myLoop(k) {
                 setTimeout(function () {
                     var animationProgress = k / frames_1;
-                    callDelete_1();
+                    callDelete_1(true);
                     callDrawChart_1(animationProgress);
                     if (k === frames_1) {
                         setSuspendUpdateFalse_1();
@@ -400,7 +590,9 @@ var SciChartPieSurface = /** @class */ (function () {
                 }
             });
         }
-        this.drawSegmentTitles();
+        if (this.sweepAnimationDone) {
+            this.drawSegmentTitles();
+        }
     };
     /**
      * @description Draws pie chart itself
@@ -413,20 +605,28 @@ var SciChartPieSurface = /** @class */ (function () {
         var strokeColor = this.themeProviderProperty.sciChartBackground;
         var segments = this.pieSegments.asArray();
         var totalValue = this.pieSegmentsTotalValue();
-        var outerRadius = (Math.min(this.viewRect.width, this.viewRect.height) * 0.8) / 2;
+        var outerRadius = (Math.min(this.calculateViewRectWidth(this.viewRect.width), this.calculateViewRectHeight(this.viewRect.height)) *
+            0.8) /
+            2;
         var innerRadius = 0;
         if (this.pieType === EPieType.Donut) {
             innerRadius =
                 this.holeRadiusSizingMode === ESizingMode.Absolute ? this.holeRadius : outerRadius * this.holeRadius;
         }
-        var xCoord = this.viewRect.width / 2;
-        var yCoord = this.viewRect.height / 2;
+        var xCoord = this.calculateViewRectWidth(this.viewRect.width) / 2;
+        var yCoord = this.calculateViewRectHeight(this.viewRect.height) / 2;
         // CREATING SVG STRING
         var gradientsBlock = "<defs>";
         var pathsBlock = "";
         var currentValue = 0;
         segments.forEach(function (el) {
-            var newValue = el.value * animationProgress;
+            var newValue;
+            if (el.oldValue) {
+                newValue = el.oldValue + (el.value - el.oldValue) * EasingFunctions_1.easing.inOutCubic(animationProgress);
+            }
+            else {
+                newValue = el.value * EasingFunctions_1.easing.inOutCubic(animationProgress);
+            }
             var hasGradient = !!el.colorLinearGradient;
             var gradientId = "grad".concat(el.id);
             if (hasGradient) {
@@ -445,8 +645,8 @@ var SciChartPieSurface = /** @class */ (function () {
             var angleFrom = (360 * currentValue) / totalValue - START_ANGLE;
             var angleTo = (360 * (currentValue + newValue)) / totalValue - START_ANGLE;
             var dAttribute = _this.pieType === EPieType.Donut
-                ? getDonutSectorPath(xCoord, yCoord, outerRadius, innerRadius, angleFrom, angleTo, el.delta)
-                : getSectorPath(xCoord, yCoord, outerRadius, angleFrom, angleTo, el.delta);
+                ? getDonutSectorPath(xCoord, yCoord, outerRadius, innerRadius, angleFrom, angleTo, el.shift + _this.seriesSpacing)
+                : getSectorPath(xCoord, yCoord, outerRadius, angleFrom, angleTo, el.shift + _this.seriesSpacing);
             var pathBlock = hasGradient
                 ? "<g fill=\"url(#".concat(gradientId, ")\"><path id=\"").concat(el.id, "\" stroke=\"").concat(strokeColor, "\" stroke-width=\"").concat(strokeWidth, "\" d=\"").concat(dAttribute, "\" /></g>")
                 : "<path id=\"".concat(el.id, "\" stroke=\"").concat(strokeColor, "\" stroke-width=\"").concat(strokeWidth, "\" d=\"").concat(dAttribute, "\" fill=\"").concat(el.color, "\" />");
@@ -454,26 +654,67 @@ var SciChartPieSurface = /** @class */ (function () {
             currentValue += newValue;
         });
         gradientsBlock += "</defs>";
-        var svgString = "<svg width=\"".concat(this.viewRect.width, "\" height=\"").concat(this.viewRect.height, "\">").concat(gradientsBlock).concat(pathsBlock, "</svg>");
+        this.adjustDomContainer();
+        var svgString = "<svg width=\"".concat(this.calculateViewRectWidth(this.viewRect.width), "\" height=\"").concat(this.calculateViewRectHeight(this.viewRect.height), "\">").concat(gradientsBlock).concat(pathsBlock, "</svg>");
         // CREATING AND ATTACHING SVG TO DOM
         var svgNode = document.createRange().createContextualFragment(svgString);
         this.domSvgContainer.appendChild(svgNode);
         this.svg = this.domSvgContainer.lastChild;
     };
+    SciChartPieSurface.prototype.adjustDomContainer = function () {
+        var _a, _b, _c, _d, _e, _f;
+        if (this.padding && this.padding.left) {
+            this.domSvgContainer.style.paddingLeft = this.padding.left + "px";
+        }
+        if (this.padding && this.padding.right) {
+            this.domSvgContainer.style.paddingRight = this.padding.right + "px";
+        }
+        if (this.padding && this.padding.top) {
+            this.domSvgContainer.style.paddingTop = this.padding.top + "px";
+        }
+        if (this.padding && this.padding.bottom) {
+            this.domSvgContainer.style.paddingBottom = this.padding.bottom + "px";
+        }
+        if (this.canvasBorder) {
+            this.domSvgContainer.style.borderStyle = "solid";
+        }
+        if ((_a = this.canvasBorder) === null || _a === void 0 ? void 0 : _a.border) {
+            this.domSvgContainer.style.borderWidth = this.canvasBorder.border + "px";
+        }
+        if ((_b = this.canvasBorder) === null || _b === void 0 ? void 0 : _b.color) {
+            this.domSvgContainer.style.borderColor = this.canvasBorder.color;
+        }
+        if ((_c = this.canvasBorder) === null || _c === void 0 ? void 0 : _c.borderBottom) {
+            this.domSvgContainer.style.borderBottomWidth = this.canvasBorder.borderBottom + "px";
+        }
+        if ((_d = this.canvasBorder) === null || _d === void 0 ? void 0 : _d.borderTop) {
+            this.domSvgContainer.style.borderTopWidth = this.canvasBorder.borderTop + "px";
+        }
+        if ((_e = this.canvasBorder) === null || _e === void 0 ? void 0 : _e.borderLeft) {
+            this.domSvgContainer.style.borderLeftWidth = this.canvasBorder.borderLeft + "px";
+        }
+        if ((_f = this.canvasBorder) === null || _f === void 0 ? void 0 : _f.borderRight) {
+            this.domSvgContainer.style.borderRightWidth = this.canvasBorder.borderRight + "px";
+        }
+    };
     SciChartPieSurface.prototype.drawSegmentTitles = function () {
         var _this = this;
         var totalValue = this.pieSegmentsTotalValue();
         var currentValue = 0;
-        var xCoord = this.viewRect.width / 2;
-        var yCoord = this.viewRect.height / 2;
-        var outerRadius = (Math.min(this.viewRect.width, this.viewRect.height) * 0.8) / 2;
+        var xCoord = this.calculateViewRectWidth(this.viewRect.width) / 2;
+        var yCoord = this.calculateViewRectHeight(this.viewRect.height) / 2;
+        var outerRadius = (Math.min(this.calculateViewRectWidth(this.viewRect.width), this.calculateViewRectHeight(this.viewRect.height)) *
+            0.8) /
+            2;
         var innerRadius = 0;
         if (this.pieType === EPieType.Donut) {
             innerRadius =
                 this.holeRadiusSizingMode === ESizingMode.Absolute ? this.holeRadius : outerRadius * this.holeRadius;
         }
         this.pieSegments.asArray().forEach(function (el, index) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             var div = document.createElement("div");
+            div.className = "scichart-pie-text-container";
             div.style.position = "absolute";
             div.style.pointerEvents = "none";
             div.style.padding = "5px";
@@ -482,13 +723,33 @@ var SciChartPieSurface = /** @class */ (function () {
             div.style.fontWeight = "bold";
             div.style.display = "block";
             div.style.fontFamily = "Arial";
-            div.innerHTML = "<div>".concat(el.getPercentage(totalValue), "</div>");
+            div.innerHTML = el.getLabelText(totalValue);
             _this.domDivContainer.appendChild(div);
             var divWidth = div.offsetWidth;
             var divHeight = div.offsetHeight;
             var angleFrom = (360 * currentValue) / totalValue - START_ANGLE;
             var angleTo = (360 * (currentValue + el.value)) / totalValue - START_ANGLE;
-            var position = calcTitlePosition(xCoord, yCoord, outerRadius, innerRadius, angleFrom, angleTo, el.delta, divWidth, divHeight);
+            var leftShift = 0;
+            var topShift = 0;
+            if ((_a = _this.padding) === null || _a === void 0 ? void 0 : _a.left) {
+                leftShift += (_b = _this.padding) === null || _b === void 0 ? void 0 : _b.left;
+            }
+            if ((_c = _this.padding) === null || _c === void 0 ? void 0 : _c.top) {
+                topShift += (_d = _this.padding) === null || _d === void 0 ? void 0 : _d.top;
+            }
+            if ((_e = _this.canvasBorder) === null || _e === void 0 ? void 0 : _e.border) {
+                leftShift += (_f = _this.canvasBorder) === null || _f === void 0 ? void 0 : _f.border;
+                topShift += (_g = _this.canvasBorder) === null || _g === void 0 ? void 0 : _g.border;
+            }
+            else {
+                if ((_h = _this.canvasBorder) === null || _h === void 0 ? void 0 : _h.borderLeft) {
+                    leftShift += (_j = _this.canvasBorder) === null || _j === void 0 ? void 0 : _j.borderLeft;
+                }
+                if ((_k = _this.canvasBorder) === null || _k === void 0 ? void 0 : _k.borderTop) {
+                    leftShift += (_l = _this.canvasBorder) === null || _l === void 0 ? void 0 : _l.borderTop;
+                }
+            }
+            var position = _this.calcTitlePosition(xCoord + leftShift, yCoord + topShift, outerRadius, innerRadius, angleFrom, angleTo, el.shift + _this.seriesSpacing, divWidth, divHeight);
             div.style.left = "".concat(position.left, "px");
             div.style.top = "".concat(position.top, "px");
             _this.titleDivs.push(div);
@@ -552,16 +813,6 @@ var getDonutSectorPath = function (x, y, outerR, innerR, a1, a2, delta) {
     return "M".concat(outerX1, " ").concat(outerY1, " A").concat(outerR, " ").concat(outerR, " 0 ").concat(bigArc, " 0 ").concat(outerX2, " ").concat(outerY2, " L").concat(innerX2, " ").concat(innerY2, " A").concat(innerR, " ").concat(innerR, " 0 ").concat(bigArc, " 1 ").concat(innerX1, " ").concat(innerY1, "Z");
 };
 /** @ignore */
-var calcTitlePosition = function (x, y, outerRadius, innerRadius, a1, a2, delta, divWidth, divHeight) {
-    var centerRadius = innerRadius < outerRadius / 2
-        ? (outerRadius * 2) / 3 + innerRadius / 6 + delta
-        : (outerRadius + innerRadius) / 2 + delta;
-    var centerAngle = (a1 + a2) / 2;
-    var left = x + Math.cos(DEG_TO_RAD * centerAngle) * centerRadius - divWidth / 2;
-    var top = y + Math.sin(DEG_TO_RAD * centerAngle) * centerRadius - divHeight / 2;
-    return { left: left, top: top };
-};
-/** @ignore */
 var isListenerBlocked = false;
 /** @ignore */
 var addEventListenerToPieSegment = function (ps, el, animate) {
@@ -574,12 +825,13 @@ var addEventListenerToPieSegment = function (ps, el, animate) {
         if (!isListenerBlocked) {
             var ROUNDS_1 = 10;
             var directionDown = ps.isSelected;
-            var start_1 = directionDown ? PieSegment_1.PieSegment.DEFAULT_DELTA : 0;
-            var d_1 = directionDown ? -PieSegment_1.PieSegment.DEFAULT_DELTA / ROUNDS_1 : PieSegment_1.PieSegment.DEFAULT_DELTA / ROUNDS_1;
+            var start_1 = directionDown ? ps.delta : 0;
+            var d_1 = directionDown ? -ps.delta / ROUNDS_1 : ps.delta / ROUNDS_1;
             isListenerBlocked = true;
+            ps.isSelected = !ps.isSelected;
             (function myLoop(k) {
                 setTimeout(function () {
-                    ps.delta = start_1 + d_1 * k;
+                    ps.shift = start_1 + d_1 * k;
                     if (k === ROUNDS_1) {
                         isListenerBlocked = false;
                     }

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

@@ -2,5 +2,10 @@ export declare enum PROPERTY {
     HOLE_RADIUS = "HOLE_RADIUS",
     HOLE_RADIUS_SIZING_MODE = "HOLE_RADIUS_SIZING_MODE",
     PIE_TYPE = "PIE_TYPE",
-    SERIES_SPACING = "SERIES_SPACING"
+    SERIES_SPACING = "SERIES_SPACING",
+    PADDING = "PADDING",
+    CANVAS_BORDER = "CANVAS_BORDER",
+    LABEL_PROVIDER = "LABEL_PROVIDER",
+    VALUE_MODE = "VALUE_MODE",
+    LABEL_RADIUS = "LABEL_RADIUS"
 }

package/Charting/Visuals/SciChartPieSurface/constants.js

@@ -7,4 +7,9 @@ var PROPERTY;
     PROPERTY["HOLE_RADIUS_SIZING_MODE"] = "HOLE_RADIUS_SIZING_MODE";
     PROPERTY["PIE_TYPE"] = "PIE_TYPE";
     PROPERTY["SERIES_SPACING"] = "SERIES_SPACING";
+    PROPERTY["PADDING"] = "PADDING";
+    PROPERTY["CANVAS_BORDER"] = "CANVAS_BORDER";
+    PROPERTY["LABEL_PROVIDER"] = "LABEL_PROVIDER";
+    PROPERTY["VALUE_MODE"] = "VALUE_MODE";
+    PROPERTY["LABEL_RADIUS"] = "LABEL_RADIUS";
 })(PROPERTY = exports.PROPERTY || (exports.PROPERTY = {}));

package/Charting/Visuals/SciChartSurface.d.ts

@@ -69,9 +69,11 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
      * To use the default CDN, just call SciChart.SciChartSurface.useWasmFromCDN();
      * @example
      * ```ts
+     * import { libraryVersion } from "scichart/Core/BuildStamp";
+     *
      * SciChart.SciChartSurface.configure({
-     *  dataUrl: "https://cdn.jsdelivr.net/npm/scichart@1.3.1500/_wasm/scichart2d.data",
-     *  wasmUrl: "https://cdn.jsdelivr.net/npm/scichart@1.3.1500/_wasm/scichart2d.wasm"
+     *  dataUrl: `https://cdn.jsdelivr.net/npm/scichart@${libraryVersion}/_wasm/scichart2d.data`,
+     *  wasmUrl: `https://cdn.jsdelivr.net/npm/scichart@${libraryVersion}/_wasm/scichart2d.wasm`
      * });
      * ```
      * @param config
@@ -192,6 +194,7 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
     private solidBrushCacheCanvasBorder;
     private viewportBorderProperty;
     private canvasBorderProperty;
+    private drawSeriesBehindAxisProperty;
     /**
      * Creates an instance of the {@link SciChartSurface}
      * @param webAssemblyContext The {@link TSciChart | SciChart 2D WebAssembly Context} containing native methods and
@@ -419,4 +422,12 @@ export declare class SciChartSurface extends SciChartSurfaceBase {
     private attachAxis;
     private detachAnnotation;
     private attachAnnotation;
+    /**
+     * Gets or sets the boolean flag for switching behaviour of Axises rendering
+     */
+    get drawSeriesBehindAxis(): boolean;
+    /**
+     * Gets or sets the boolean flag for switching behaviour of Axises rendering
+     */
+    set drawSeriesBehindAxis(value: boolean);
 }