@fluentui/react-charting 5.25.0 → 5.25.2

package/lib-amd/components/CommonComponents/CartesianChart.base.js

@@ -6,13 +6,11 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
     var ChartHoverCard = React.lazy(function () {
         return new Promise(function (resolve_1, reject_1) { require(['../../utilities/ChartHoverCard/ChartHoverCard'], resolve_1, reject_1); }).then(function (module) { return ({ default: module.ChartHoverCard }); });
     });
-    var chartTypesWithStringYAxis = [
-        index_1.ChartTypes.HorizontalBarChartWithAxis,
-        index_1.ChartTypes.HeatMapChart,
-        index_1.ChartTypes.VerticalStackedBarChart,
-        index_1.ChartTypes.GanttChart,
-        index_1.ChartTypes.ScatterChart,
-    ];
+    var HORIZONTAL_MARGIN_FOR_YAXIS_TITLE = 24;
+    var VERTICAL_MARGIN_FOR_XAXIS_TITLE = 20;
+    var AXIS_TITLE_PADDING = 8;
+    var DEFAULT_MARGIN_WITH_TICKS = 40;
+    var DEFAULT_MARGIN_NO_TICKS = 20;
     /**
      * Cartesian chart used for
      * 1.draw X and Y axis of the chart
@@ -22,7 +20,6 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
     var CartesianChartBase = /** @class */ (function (_super) {
         tslib_1.__extends(CartesianChartBase, _super);
         function CartesianChartBase(props) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
             var _this = _super.call(this, props) || this;
             _this.minLegendContainerHeight = 32;
             _this._isRtl = (0, Utilities_1.getRTL)();
@@ -34,6 +31,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
              * Defalut value is 0. And this values calculted when 'wrapXAxisLables' or 'showXAxisLablesTooltip' is true.
              */
             _this._removalValueForTextTuncate = 0;
+            _this._yAxisTickText = [];
             _this.isIntegralDataset = true;
             _this.calculateMaxYAxisLabelLength = function (className) {
                 var formatTickLabel = function (str) {
@@ -42,7 +40,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                     }
                     return str;
                 };
-                return (0, index_1.calculateLongestLabelWidth)(_this.props.stringDatasetForYAxisDomain.map(function (label) { return formatTickLabel(label); }), ".".concat(className, " text"));
+                return (0, index_1.calculateLongestLabelWidth)(_this._yAxisTickText.map(function (label) { return formatTickLabel(label); }), ".".concat(className, " text"));
             };
             // TO DO: Write a common functional component for Multi value callout and divide sub count method
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -178,6 +176,55 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                     _this._removalValueForTextTuncate = rotatedHeight + _this.margins.bottom;
                 }
             };
+            _this._calcMargins = function () {
+                var margins = _this._getDefaultMargins();
+                margins = _this._applyTitleMargins(margins);
+                margins = _this._applyAnnotationMargins(margins);
+                if (_this._isRtl) {
+                    margins = _this._swapRtlMargins(margins);
+                }
+                return tslib_1.__assign(tslib_1.__assign({}, margins), _this.props.margins);
+            };
+            _this._getDefaultMargins = function () {
+                return {
+                    top: DEFAULT_MARGIN_NO_TICKS,
+                    // Smaller than the default because it is based on the line height rather than
+                    // the length of the tick labels.
+                    bottom: DEFAULT_MARGIN_WITH_TICKS - 5,
+                    // For the actual margin, add the tick size, tick padding, and some extra space to
+                    // the width of the longest yaxis tick label (startFromX).
+                    left: Math.max(DEFAULT_MARGIN_WITH_TICKS, _this.state.startFromX + 20),
+                    right: _this.props.secondaryYScaleOptions ? DEFAULT_MARGIN_WITH_TICKS : DEFAULT_MARGIN_NO_TICKS,
+                };
+            };
+            _this._applyTitleMargins = function (margins) {
+                var updated = tslib_1.__assign({}, margins);
+                if (_this.props.xAxisTitle !== undefined && _this.props.xAxisTitle !== '') {
+                    updated.bottom += VERTICAL_MARGIN_FOR_XAXIS_TITLE;
+                }
+                if (_this.props.yAxisTitle !== undefined && _this.props.yAxisTitle !== '') {
+                    updated.left += HORIZONTAL_MARGIN_FOR_YAXIS_TITLE;
+                }
+                if (_this.props.secondaryYAxistitle !== undefined && _this.props.secondaryYAxistitle !== '') {
+                    updated.right += HORIZONTAL_MARGIN_FOR_YAXIS_TITLE;
+                }
+                return updated;
+            };
+            _this._applyAnnotationMargins = function (margins) {
+                var updated = tslib_1.__assign({}, margins);
+                if (_this.props.xAxisAnnotation !== undefined && _this.props.xAxisAnnotation !== '') {
+                    updated.top += VERTICAL_MARGIN_FOR_XAXIS_TITLE;
+                }
+                if (_this.props.yAxisAnnotation !== undefined &&
+                    _this.props.yAxisAnnotation !== '' &&
+                    (_this.props.secondaryYAxistitle === undefined || _this.props.secondaryYAxistitle === '')) {
+                    updated.right += HORIZONTAL_MARGIN_FOR_YAXIS_TITLE;
+                }
+                return updated;
+            };
+            _this._swapRtlMargins = function (margins) {
+                return tslib_1.__assign(tslib_1.__assign({}, margins), { left: margins.right, right: margins.left });
+            };
             _this.state = {
                 containerHeight: 0,
                 containerWidth: 0,
@@ -186,67 +233,13 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                 startFromX: 0,
             };
             _this.idForGraph = (0, Utilities_1.getId)('chart_');
-            _this.titleMargin = 8;
             _this.idForDefaultTabbableElement = (0, Utilities_1.getId)('defaultTabbableElement_');
             _this._tooltipId = (0, Utilities_1.getId)('tooltip_');
-            /**
-             * In RTL mode, Only graph will be rendered left/right. We need to provide left and right margins manually.
-             * So that, in RTL, left margins becomes right margins and viceversa.
-             * As graph needs to be drawn perfecty, these values consider as default values.
-             * Same margins using for all other cartesian charts. Can be accessible through 'getMargins' call back method.
-             */
-            _this.margins = {
-                top: (_b = (_a = _this.props.margins) === null || _a === void 0 ? void 0 : _a.top) !== null && _b !== void 0 ? _b : 20,
-                bottom: (_d = (_c = _this.props.margins) === null || _c === void 0 ? void 0 : _c.bottom) !== null && _d !== void 0 ? _d : 35,
-                right: _this._isRtl
-                    ? (_f = (_e = _this.props.margins) === null || _e === void 0 ? void 0 : _e.left) !== null && _f !== void 0 ? _f : 40
-                    : ((_h = (_g = _this.props.margins) === null || _g === void 0 ? void 0 : _g.right) !== null && _h !== void 0 ? _h : (_j = _this.props) === null || _j === void 0 ? void 0 : _j.secondaryYScaleOptions)
-                        ? 40
-                        : 20,
-                left: _this._isRtl
-                    ? ((_l = (_k = _this.props.margins) === null || _k === void 0 ? void 0 : _k.right) !== null && _l !== void 0 ? _l : (_m = _this.props) === null || _m === void 0 ? void 0 : _m.secondaryYScaleOptions)
-                        ? 40
-                        : 20
-                    : (_p = (_o = _this.props.margins) === null || _o === void 0 ? void 0 : _o.left) !== null && _p !== void 0 ? _p : 40,
-            };
-            var TITLE_MARGIN_HORIZONTAL = 24;
-            var TITLE_MARGIN_VERTICAL = 20;
-            if (_this.props.xAxisTitle !== undefined && _this.props.xAxisTitle !== '') {
-                _this.margins.bottom = (_r = (_q = _this.props.margins) === null || _q === void 0 ? void 0 : _q.bottom) !== null && _r !== void 0 ? _r : _this.margins.bottom + TITLE_MARGIN_VERTICAL;
-            }
-            if (_this.props.yAxisTitle !== undefined && _this.props.yAxisTitle !== '') {
-                _this.margins.left = _this._isRtl
-                    ? ((_t = (_s = _this.props.margins) === null || _s === void 0 ? void 0 : _s.right) !== null && _t !== void 0 ? _t : (_u = _this.props) === null || _u === void 0 ? void 0 : _u.secondaryYAxistitle)
-                        ? _this.margins.right + 2 * TITLE_MARGIN_HORIZONTAL
-                        : _this.margins.right + TITLE_MARGIN_HORIZONTAL
-                    : (_w = (_v = _this.props.margins) === null || _v === void 0 ? void 0 : _v.left) !== null && _w !== void 0 ? _w : _this.margins.left + TITLE_MARGIN_HORIZONTAL;
-                _this.margins.right = _this._isRtl
-                    ? (_y = (_x = _this.props.margins) === null || _x === void 0 ? void 0 : _x.left) !== null && _y !== void 0 ? _y : _this.margins.left + TITLE_MARGIN_HORIZONTAL
-                    : ((_0 = (_z = _this.props.margins) === null || _z === void 0 ? void 0 : _z.right) !== null && _0 !== void 0 ? _0 : (_1 = _this.props) === null || _1 === void 0 ? void 0 : _1.secondaryYAxistitle)
-                        ? _this.margins.right + 2 * TITLE_MARGIN_HORIZONTAL
-                        : _this.margins.right + TITLE_MARGIN_HORIZONTAL;
-            }
-            if (_this.props.xAxisAnnotation !== undefined && _this.props.xAxisAnnotation !== '') {
-                _this.margins.top = (_3 = (_2 = _this.props.margins) === null || _2 === void 0 ? void 0 : _2.top) !== null && _3 !== void 0 ? _3 : _this.margins.top + TITLE_MARGIN_VERTICAL;
-            }
-            if (_this.props.yAxisAnnotation !== undefined &&
-                _this.props.yAxisAnnotation !== '' &&
-                (_this.props.secondaryYAxistitle === undefined || _this.props.secondaryYAxistitle === '')) {
-                if (_this._isRtl) {
-                    _this.margins.left = (_5 = (_4 = _this.props.margins) === null || _4 === void 0 ? void 0 : _4.right) !== null && _5 !== void 0 ? _5 : _this.margins.right + TITLE_MARGIN_HORIZONTAL;
-                }
-                else {
-                    _this.margins.right = (_7 = (_6 = _this.props.margins) === null || _6 === void 0 ? void 0 : _6.right) !== null && _7 !== void 0 ? _7 : _this.margins.right + TITLE_MARGIN_HORIZONTAL;
-                }
-            }
             return _this;
         }
         CartesianChartBase.prototype.componentDidMount = function () {
             this._fitParentContainer();
-            if (chartTypesWithStringYAxis.includes(this.props.chartType) &&
-                this.props.showYAxisLables &&
-                this.yAxisElement &&
-                this.props.yAxisType === index_1.YAxisType.StringAxis) {
+            if (this.props.showYAxisLables) {
                 var maxYAxisLabelLength = this.calculateMaxYAxisLabelLength(this._classNames.yAxis);
                 if (this.state.startFromX !== maxYAxisLabelLength) {
                     this.setState({
@@ -270,10 +263,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
             if (prevProps.height !== this.props.height || prevProps.width !== this.props.width) {
                 this._fitParentContainer();
             }
-            if (chartTypesWithStringYAxis.includes(this.props.chartType) &&
-                this.props.showYAxisLables &&
-                this.yAxisElement &&
-                this.props.yAxisType === index_1.YAxisType.StringAxis) {
+            if (this.props.showYAxisLables) {
                 var maxYAxisLabelLength = this.calculateMaxYAxisLabelLength(this._classNames.yAxis);
                 if (this.state.startFromX !== maxYAxisLabelLength) {
                     this.setState({
@@ -301,18 +291,9 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
             if (this.props.parentRef) {
                 this._fitParentContainer();
             }
-            var margin = tslib_1.__assign({}, this.margins);
-            // Note: This check is unnecessary since startFromX is only set for charts with string y-axis.
-            if (chartTypesWithStringYAxis.includes(this.props.chartType)) {
-                if (!this._isRtl) {
-                    margin.left += this.state.startFromX;
-                }
-                else {
-                    margin.right += this.state.startFromX;
-                }
-            }
+            this.margins = this._calcMargins();
             // Callback for margins to the chart
-            this.props.getmargins && this.props.getmargins(margin);
+            this.props.getmargins && this.props.getmargins(this.margins);
             this._classNames = getClassNames(this.props.styles, {
                 theme: this.props.theme,
                 width: this.state._width,
@@ -331,9 +312,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
             if ((this.props.enableFirstRenderOptimization && this.chartContainer) ||
                 !this.props.enableFirstRenderOptimization) {
                 this._isFirstRender = false;
-                var XAxisParams = tslib_1.__assign({ domainNRangeValues: this.props.getDomainNRangeValues(points, this.props.getDomainMargins ? this.props.getDomainMargins(this.state.containerWidth) : this.margins, this.state.containerWidth, chartType, this._isRtl, this.props.xAxisType, this.props.barwidth, this.props.tickValues, 
-                    // This is only used for Horizontal Bar Chart with Axis for y as string axis
-                    this.state.startFromX), 
+                var XAxisParams = tslib_1.__assign({ domainNRangeValues: this.props.getDomainNRangeValues(points, this.props.getDomainMargins ? this.props.getDomainMargins(this.state.containerWidth) : this.margins, this.state.containerWidth, chartType, this._isRtl, this.props.xAxisType, this.props.barwidth, this.props.tickValues), 
                     // FIXME: In XAxisParams, containerHeight is used by HBWA to generate vertical gridlines.
                     // Since the x-axis in HBWA is numeric, it typically doesn't require transformation.
                     // However, if transformation props are enabled, the updated _removalValueForTextTuncate
@@ -377,9 +356,9 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                  * 2. To draw the graph.
                  * For area/line chart using same scales. For other charts, creating their own scales to draw the graph.
                  */
-                var axisData = { yAxisDomainValues: [] };
+                var axisData = { yAxisDomainValues: [], yAxisTickText: [] };
                 if (this.props.yAxisType && this.props.yAxisType === index_1.YAxisType.StringAxis) {
-                    yScalePrimary = this.props.createStringYAxis(YAxisParams, this.props.stringDatasetForYAxisDomain, this._isRtl, this.props.barwidth, this.props.chartType);
+                    yScalePrimary = this.props.createStringYAxis(YAxisParams, this.props.stringDatasetForYAxisDomain, this._isRtl, axisData, this.props.barwidth, this.props.chartType);
                 }
                 else {
                     // TODO: Since the scale domain values are now computed independently for both the primary and
@@ -405,40 +384,39 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                     }
                     yScalePrimary = this.props.createYAxis(YAxisParams, this._isRtl, axisData, this.isIntegralDataset, false, this.props.supportNegativeData, this.props.roundedTicks, this.props.yScaleType);
                 }
-                if (chartTypesWithStringYAxis.includes(this.props.chartType) && this.props.yAxisType === index_1.YAxisType.StringAxis) {
-                    // Removing un wanted tooltip div from DOM, when prop not provided, for proper cleanup
-                    // of unwanted DOM elements, to prevent flacky behaviour in tooltips , that might occur
-                    // in creating tooltips when tooltips are enabled( as we try to recreate a tspan with this._tooltipId)
-                    if (!this.props.showYAxisLablesTooltip) {
-                        try {
-                            document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
-                            //eslint-disable-next-line no-empty
-                        }
-                        catch (e) { }
+                this._yAxisTickText = axisData.yAxisTickText;
+                this.props.getAxisData && this.props.getAxisData(axisData);
+                // Removing un wanted tooltip div from DOM, when prop not provided, for proper cleanup
+                // of unwanted DOM elements, to prevent flacky behaviour in tooltips , that might occur
+                // in creating tooltips when tooltips are enabled( as we try to recreate a tspan with this._tooltipId)
+                if (!this.props.showYAxisLablesTooltip) {
+                    try {
+                        document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
+                        //eslint-disable-next-line no-empty
                     }
-                    // Used to display tooltip at y axis labels.
-                    if (this.props.showYAxisLablesTooltip) {
-                        // To create y axis tick values by if specified truncating the rest of the text
-                        // and showing elipsis or showing the whole string,
-                        yScalePrimary &&
-                            // Note: This function should be invoked within the showYAxisLablesTooltip check,
-                            // as its sole purpose is to truncate labels that exceed the noOfCharsToTruncate limit.
-                            (0, index_1.createYAxisLabels)(this.yAxisElement, yScalePrimary, this.props.noOfCharsToTruncate || 4, this.props.showYAxisLablesTooltip || false, this._isRtl);
-                        var yAxisElement = (0, d3_selection_1.select)(this.yAxisElement).call(yScalePrimary);
-                        try {
-                            document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
-                            //eslint-disable-next-line no-empty
-                        }
-                        catch (e) { }
-                        var ytooltipProps = {
-                            tooltipCls: this._classNames.tooltip,
-                            id: this._tooltipId,
-                            axis: yAxisElement,
-                        };
-                        yAxisElement && (0, index_1.tooltipOfAxislabels)(ytooltipProps);
+                    catch (e) { }
+                }
+                // Used to display tooltip at y axis labels.
+                if (this.props.showYAxisLablesTooltip) {
+                    // To create y axis tick values by if specified truncating the rest of the text
+                    // and showing elipsis or showing the whole string,
+                    yScalePrimary &&
+                        // Note: This function should be invoked within the showYAxisLablesTooltip check,
+                        // as its sole purpose is to truncate labels that exceed the noOfCharsToTruncate limit.
+                        (0, index_1.createYAxisLabels)(this.yAxisElement, yScalePrimary, this.props.noOfCharsToTruncate || 4, this.props.showYAxisLablesTooltip || false, this._isRtl);
+                    var yAxisElement = (0, d3_selection_1.select)(this.yAxisElement).call(yScalePrimary);
+                    try {
+                        document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
+                        //eslint-disable-next-line no-empty
                     }
+                    catch (e) { }
+                    var ytooltipProps = {
+                        tooltipCls: this._classNames.tooltip,
+                        id: this._tooltipId,
+                        axis: yAxisElement,
+                    };
+                    yAxisElement && (0, index_1.tooltipOfAxislabels)(ytooltipProps);
                 }
-                this.props.getAxisData && this.props.getAxisData(axisData);
                 // Callback function for chart, returns axis
                 this._getData(xScale, yScalePrimary, yScaleSecondary);
                 children = this.props.children(tslib_1.__assign(tslib_1.__assign({}, this.state), { xScale: xScale, yScalePrimary: yScalePrimary, yScaleSecondary: yScaleSecondary }));
@@ -450,11 +428,10 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                 width: this.state.containerWidth,
                 height: this.state.containerHeight,
             };
-            var startFromX = this.state.startFromX || 0;
-            var plotWidth = Math.max(0, svgDimensions.width - this.margins.left - this.margins.right - startFromX);
+            var plotWidth = Math.max(0, svgDimensions.width - this.margins.left - this.margins.right);
             var plotHeight = Math.max(0, svgDimensions.height - this.margins.top - this.margins.bottom - this._removalValueForTextTuncate);
             var plotRect = {
-                x: this._isRtl ? this.margins.left : this.margins.left + startFromX,
+                x: this.margins.left,
                 y: this.margins.top,
                 width: plotWidth,
                 height: plotHeight,
@@ -481,12 +458,19 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
             else {
                 focusDirection = react_focus_1.FocusZoneDirection.horizontal;
             }
-            var xAxisTitleMaximumAllowedWidth = svgDimensions.width - this.margins.left - this.margins.right - this.state.startFromX;
-            var yAxisTitleMaximumAllowedHeight = svgDimensions.height -
+            var xAxisTitleMaxWidth = svgDimensions.width - this.margins.left - this.margins.right - AXIS_TITLE_PADDING * 2;
+            var yAxisTitleMaxHeight = svgDimensions.height -
                 this.margins.bottom -
                 this.margins.top -
                 this._removalValueForTextTuncate -
-                this.titleMargin;
+                AXIS_TITLE_PADDING * 2;
+            var yAxisTitleCenterY = this.margins.top + AXIS_TITLE_PADDING + yAxisTitleMaxHeight / 2;
+            var yAxisTitleCenterX = this._isRtl
+                ? svgDimensions.width - AXIS_TITLE_PADDING
+                : HORIZONTAL_MARGIN_FOR_YAXIS_TITLE - AXIS_TITLE_PADDING;
+            var secondaryYAxisTitleCenterX = this._isRtl
+                ? HORIZONTAL_MARGIN_FOR_YAXIS_TITLE - AXIS_TITLE_PADDING
+                : svgDimensions.width - AXIS_TITLE_PADDING;
             var commonSvgToolTipProps = {
                 wrapContent: index_1.wrapContent,
                 theme: this.props.theme,
@@ -512,7 +496,9 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
              *    But this is a hacky solution and not a proper fix and also elementRef is deprecated.
              * 2. Using the default tabbable element to fix the issue.
              */
-            return (React.createElement("div", { id: this.idForGraph, className: this._classNames.root, ref: function (rootElem) { return (_this.chartContainer = rootElem); }, onMouseLeave: this._onChartLeave },
+            return (React.createElement("div", { id: this.idForGraph, className: this._classNames.root, ref: function (rootElem) {
+                    _this.chartContainer = rootElem;
+                }, onMouseLeave: this._onChartLeave },
                 !this._isFirstRender && React.createElement("div", { id: this.idForDefaultTabbableElement }),
                 React.createElement(react_focus_1.FocusZone, tslib_1.__assign({ direction: focusDirection, className: this._classNames.chartWrapper, defaultTabbableElement: "#".concat(this.idForDefaultTabbableElement) }, svgFocusZoneProps),
                     this._isFirstRender && React.createElement("div", { id: this.idForDefaultTabbableElement }),
@@ -523,69 +509,57 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                             // To add wrap of x axis lables feature, need to remove word height from svg height.
                             transform: "translate(0, ".concat(svgDimensions.height - this.margins.bottom - this._removalValueForTextTuncate, ")"), className: this._classNames.xAxis }),
                         this.props.xAxisTitle !== undefined && this.props.xAxisTitle !== '' && (React.createElement(SVGTooltipText_1.SVGTooltipText, tslib_1.__assign({ content: this.props.xAxisTitle, textProps: {
-                                x: this.margins.left + this.state.startFromX + xAxisTitleMaximumAllowedWidth / 2,
-                                y: svgDimensions.height - this.titleMargin,
+                                x: this.margins.left + AXIS_TITLE_PADDING + xAxisTitleMaxWidth / 2,
+                                y: svgDimensions.height - AXIS_TITLE_PADDING,
                                 className: this._classNames.axisTitle,
                                 textAnchor: 'middle',
                                 'aria-hidden': true,
-                            }, maxWidth: xAxisTitleMaximumAllowedWidth }, commonSvgToolTipProps))),
+                            }, maxWidth: xAxisTitleMaxWidth }, commonSvgToolTipProps))),
                         this.props.xAxisAnnotation !== undefined && this.props.xAxisAnnotation !== '' && (React.createElement(SVGTooltipText_1.SVGTooltipText, tslib_1.__assign({ content: this.props.xAxisAnnotation, textProps: {
-                                x: this.margins.left + this.state.startFromX + xAxisTitleMaximumAllowedWidth / 2,
-                                y: this.titleMargin + 3,
+                                x: this.margins.left + AXIS_TITLE_PADDING + xAxisTitleMaxWidth / 2,
+                                y: VERTICAL_MARGIN_FOR_XAXIS_TITLE - AXIS_TITLE_PADDING,
                                 className: this._classNames.axisAnnotation,
                                 textAnchor: 'middle',
                                 'aria-hidden': true,
-                            }, maxWidth: xAxisTitleMaximumAllowedWidth }, commonSvgToolTipProps))),
+                            }, maxWidth: xAxisTitleMaxWidth }, commonSvgToolTipProps))),
                         React.createElement("g", { ref: function (e) {
                                 _this.yAxisElement = e;
-                            }, id: "yAxisGElement".concat(this.idForGraph), transform: "translate(".concat(this._isRtl
-                                ? svgDimensions.width - this.margins.right - this.state.startFromX
-                                : this.margins.left + this.state.startFromX, ", 0)"), className: this._classNames.yAxis }),
+                            }, id: "yAxisGElement".concat(this.idForGraph), transform: "translate(".concat(this._isRtl ? svgDimensions.width - this.margins.right : this.margins.left, ", 0)"), className: this._classNames.yAxis }),
                         this.props.secondaryYScaleOptions && (React.createElement("g", null,
                             React.createElement("g", { ref: function (e) {
                                     _this.yAxisElementSecondary = e;
-                                }, id: "yAxisGElementSecondary".concat(this.idForGraph), transform: "translate(".concat(this._isRtl
-                                    ? this.margins.left + this.state.startFromX
-                                    : svgDimensions.width - this.margins.right - this.state.startFromX, ", 0)"), className: this._classNames.yAxis }),
+                                }, id: "yAxisGElementSecondary".concat(this.idForGraph), transform: "translate(".concat(this._isRtl ? this.margins.left : svgDimensions.width - this.margins.right, ", 0)"), className: this._classNames.yAxis }),
                             this.props.secondaryYAxistitle !== undefined && this.props.secondaryYAxistitle !== '' && (React.createElement(SVGTooltipText_1.SVGTooltipText, tslib_1.__assign({ content: this.props.secondaryYAxistitle, textProps: {
-                                    x: (yAxisTitleMaximumAllowedHeight - this.margins.bottom) / 2 + this._removalValueForTextTuncate,
-                                    y: this._isRtl
-                                        ? this.state.startFromX - this.titleMargin
-                                        : svgDimensions.width - this.margins.right,
+                                    x: secondaryYAxisTitleCenterX,
+                                    y: yAxisTitleCenterY,
                                     textAnchor: 'middle',
-                                    transform: "translate(".concat(this._isRtl
-                                        ? this.margins.right / 2 - this.titleMargin
-                                        : this.margins.right / 2 + this.titleMargin, ",\n                   ").concat(svgDimensions.height - this.margins.bottom - this.margins.top - this.titleMargin, ")rotate(-90)"),
+                                    transform: "rotate(-90, ".concat(secondaryYAxisTitleCenterX, ", ").concat(yAxisTitleCenterY, ")"),
                                     className: this._classNames.axisTitle,
                                     'aria-hidden': true,
-                                }, maxWidth: yAxisTitleMaximumAllowedHeight }, commonSvgToolTipProps))))),
+                                }, maxWidth: yAxisTitleMaxHeight }, commonSvgToolTipProps))))),
                         children,
                         this.props.yAxisTitle !== undefined && this.props.yAxisTitle !== '' && (React.createElement(SVGTooltipText_1.SVGTooltipText, tslib_1.__assign({ content: this.props.yAxisTitle, textProps: {
-                                x: (yAxisTitleMaximumAllowedHeight - this.margins.bottom) / 2 + this._removalValueForTextTuncate,
-                                y: this._isRtl
-                                    ? svgDimensions.width - this.margins.right / 2 + this.titleMargin
-                                    : this.margins.left / 2 - this.titleMargin,
+                                x: yAxisTitleCenterX,
+                                y: yAxisTitleCenterY,
                                 textAnchor: 'middle',
-                                transform: "translate(0,\n                   ".concat(svgDimensions.height - this.margins.bottom - this.margins.top - this.titleMargin, ")rotate(-90)"),
+                                transform: "rotate(-90, ".concat(yAxisTitleCenterX, ", ").concat(yAxisTitleCenterY, ")"),
                                 className: this._classNames.axisTitle,
                                 'aria-hidden': true,
-                            }, maxWidth: yAxisTitleMaximumAllowedHeight }, commonSvgToolTipProps))),
+                            }, maxWidth: yAxisTitleMaxHeight }, commonSvgToolTipProps))),
                         this.props.yAxisAnnotation !== undefined &&
                             this.props.yAxisAnnotation !== '' &&
                             (this.props.secondaryYAxistitle === undefined || this.props.secondaryYAxistitle === '') && (React.createElement(SVGTooltipText_1.SVGTooltipText, tslib_1.__assign({ content: this.props.yAxisAnnotation, textProps: {
-                                x: (yAxisTitleMaximumAllowedHeight - this.margins.bottom) / 2 + this._removalValueForTextTuncate,
-                                y: this._isRtl
-                                    ? this.state.startFromX - this.titleMargin
-                                    : svgDimensions.width - this.margins.right,
+                                x: secondaryYAxisTitleCenterX,
+                                y: yAxisTitleCenterY,
                                 textAnchor: 'middle',
-                                transform: "translate(".concat(this._isRtl
-                                    ? this.margins.right / 2 - this.titleMargin
-                                    : this.margins.right / 2 + this.titleMargin, ",\n                   ").concat(svgDimensions.height - this.margins.bottom - this.margins.top - this.titleMargin, ")rotate(-90)"),
+                                transform: "rotate(-90, ".concat(secondaryYAxisTitleCenterX, ", ").concat(yAxisTitleCenterY, ")"),
                                 className: this._classNames.axisAnnotation,
                                 'aria-hidden': true,
-                            }, maxWidth: yAxisTitleMaximumAllowedHeight }, commonSvgToolTipProps)))),
+                            }, maxWidth: yAxisTitleMaxHeight }, commonSvgToolTipProps)))),
                     hasAnnotations && annotationContext && (React.createElement(ChartAnnotationLayer_1.ChartAnnotationLayer, { annotations: annotations, context: annotationContext, theme: this.props.theme, className: this._classNames.annotationLayer }))),
-                !this.props.hideLegend && (React.createElement("div", { ref: function (e) { return (_this.legendContainer = e); }, className: this._classNames.legendContainer }, this.props.legendBars)),
+                !this.props.hideLegend && (React.createElement("div", { ref: function (e) {
+                        _this.legendContainer = e;
+                    }, className: this._classNames.legendContainer }, this.props.legendBars)),
                 callout && React.createElement(React.Suspense, { fallback: React.createElement("div", null, "Loading...") }, callout)));
         };
         /**