@fluentui/react-charting 5.24.6 → 5.24.8

package/lib-amd/utilities/vbc-utils.js

@@ -1,7 +1,7 @@
 define(["require", "exports"], function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.calculateAppropriateBarWidth = exports.getClosestPairDiffAndRange = void 0;
+    exports.calcBandwidth = exports.calcRequiredWidth = exports.calcTotalBandUnits = exports.calcTotalWidth = exports.calculateAppropriateBarWidth = exports.getClosestPairDiffAndRange = void 0;
     var getClosestPairDiffAndRange = function (data) {
         if (data.length < 2) {
             return;
@@ -34,5 +34,38 @@ define(["require", "exports"], function (require, exports) {
         return barWidth;
     };
     exports.calculateAppropriateBarWidth = calculateAppropriateBarWidth;
+    /**
+     * Calculates the total width available for rendering bars.
+     */
+    var calcTotalWidth = function (containerWidth, margins, extraMargin) {
+        if (extraMargin === void 0) { extraMargin = 0; }
+        return containerWidth - (margins.left || 0) - (margins.right || 0) - extraMargin * 2;
+    };
+    exports.calcTotalWidth = calcTotalWidth;
+    /**
+     * Calculates the combined size of all bands and the gaps between them, in units relative to the bandwidth.
+     */
+    var calcTotalBandUnits = function (numBands, innerPadding) {
+        // inner_padding = space_between_bands / (space_between_bands + bandwidth)
+        // => space_between_bands = (inner_padding / (1 - inner_padding)) * bandwidth
+        var gapToBandRatio = innerPadding / (1 - innerPadding);
+        return numBands + (numBands - 1) * gapToBandRatio;
+    };
+    exports.calcTotalBandUnits = calcTotalBandUnits;
+    /**
+     * Calculates the total width required to render all bands including the gaps between them.
+     */
+    var calcRequiredWidth = function (bandwidth, numBands, innerPadding) {
+        return bandwidth * (0, exports.calcTotalBandUnits)(numBands, innerPadding);
+    };
+    exports.calcRequiredWidth = calcRequiredWidth;
+    /**
+     * Calculates the maximum possible bandwidth such that the combined widths of all bands
+     * and the gaps between them exactly fill the total available width.
+     */
+    var calcBandwidth = function (totalWidth, numBands, innerPadding) {
+        return totalWidth / (0, exports.calcTotalBandUnits)(numBands, innerPadding);
+    };
+    exports.calcBandwidth = calcBandwidth;
 });
 //# sourceMappingURL=vbc-utils.js.map

package/lib-amd/utilities/vbc-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"vbc-utils.js","sourceRoot":"../src/","sources":["utilities/vbc-utils.ts"],"names":[],"mappings":";;;;IAAO,IAAM,0BAA0B,GAAG,UAAC,IAAuB;QAChE,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QACD,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,UAAC,CAAC,EAAE,CAAC;YACpB,OAAA,CAAC,YAAY,IAAI,CAAC,CAAC,CAAE,CAAU,CAAC,OAAO,EAAE,GAAI,CAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAE,CAAY,GAAI,CAAY;QAAjG,CAAiG,CAClG,CAAC;QACF,IAAI,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC;QAC/B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACrC,IAAM,IAAI,GACR,IAAI,CAAC,CAAC,CAAC,YAAY,IAAI;gBACrB,CAAC,CAAE,IAAI,CAAC,CAAC,CAAU,CAAC,OAAO,EAAE,GAAI,IAAI,CAAC,CAAC,GAAG,CAAC,CAAU,CAAC,OAAO,EAAE;gBAC/D,CAAC,CAAE,IAAI,CAAC,CAAC,CAAY,GAAI,IAAI,CAAC,CAAC,GAAG,CAAC,CAAY,CAAC;YACpD,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QACpC,CAAC;QACD,IAAM,KAAK,GACT,IAAI,CAAC,CAAC,CAAC,YAAY,IAAI;YACrB,CAAC,CAAE,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAU,CAAC,OAAO,EAAE,GAAI,IAAI,CAAC,CAAC,CAAU,CAAC,OAAO,EAAE;YACzE,CAAC,CAAE,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAY,GAAI,IAAI,CAAC,CAAC,CAAY,CAAC;QAC9D,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAC1B,CAAC,CAAC;IApBW,QAAA,0BAA0B,8BAoBrC;IAEK,IAAM,4BAA4B,GAAG,UAAC,IAAuB,EAAE,UAAkB,EAAE,YAAoB;QAC5G,IAAM,MAAM,GAAG,IAAA,kCAA0B,EAAC,IAAI,CAAC,CAAC;QAChD,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC;YAC/B,OAAO,EAAE,CAAC;QACZ,CAAC;QACM,IAAA,eAAe,GAAW,MAAM,GAAjB,EAAE,KAAK,GAAI,MAAM,GAAV,CAAW;QACxC,mHAAmH;QACnH,+CAA+C;QAC/C,IAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CACzB,CAAC,UAAU,GAAG,eAAe,GAAG,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,GAAG,CAAC,KAAK,GAAG,eAAe,GAAG,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,CACrG,CAAC;QACF,OAAO,QAAQ,CAAC;IAClB,CAAC,CAAC;IAZW,QAAA,4BAA4B,gCAYvC","sourcesContent":["export const getClosestPairDiffAndRange = (data: number[] | Date[]): [number, number] | undefined => {\n  if (data.length < 2) {\n    return;\n  }\n  data = data.sort((a, b) =>\n    a instanceof Date ? (a as Date).getTime() - (b as Date).getTime() : (a as number) - (b as number),\n  );\n  let minDiff = Number.MAX_VALUE;\n  for (let i = 1; i < data.length; i++) {\n    const diff =\n      data[i] instanceof Date\n        ? (data[i] as Date).getTime() - (data[i - 1] as Date).getTime()\n        : (data[i] as number) - (data[i - 1] as number);\n    minDiff = Math.min(minDiff, diff);\n  }\n  const range =\n    data[0] instanceof Date\n      ? (data[data.length - 1] as Date).getTime() - (data[0] as Date).getTime()\n      : (data[data.length - 1] as number) - (data[0] as number);\n  return [minDiff, range];\n};\n\nexport const calculateAppropriateBarWidth = (data: number[] | Date[], totalWidth: number, innerPadding: number) => {\n  const result = getClosestPairDiffAndRange(data);\n  if (!result || result[1] === 0) {\n    return 16;\n  }\n  const [closestPairDiff, range] = result;\n  // Refer to https://microsoft.github.io/fluentui-charting-contrib/docs/rfcs/fix-overlapping-bars-on-continuous-axes\n  // for the derivation of the following formula.\n  const barWidth = Math.floor(\n    (totalWidth * closestPairDiff * (1 - innerPadding)) / (range + closestPairDiff * (1 - innerPadding)),\n  );\n  return barWidth;\n};\n"]}
+{"version":3,"file":"vbc-utils.js","sourceRoot":"../src/","sources":["utilities/vbc-utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { IMargins } from './utilities';\n\nexport const getClosestPairDiffAndRange = (data: number[] | Date[]): [number, number] | undefined => {\n  if (data.length < 2) {\n    return;\n  }\n  data = data.sort((a, b) =>\n    a instanceof Date ? (a as Date).getTime() - (b as Date).getTime() : (a as number) - (b as number),\n  );\n  let minDiff = Number.MAX_VALUE;\n  for (let i = 1; i < data.length; i++) {\n    const diff =\n      data[i] instanceof Date\n        ? (data[i] as Date).getTime() - (data[i - 1] as Date).getTime()\n        : (data[i] as number) - (data[i - 1] as number);\n    minDiff = Math.min(minDiff, diff);\n  }\n  const range =\n    data[0] instanceof Date\n      ? (data[data.length - 1] as Date).getTime() - (data[0] as Date).getTime()\n      : (data[data.length - 1] as number) - (data[0] as number);\n  return [minDiff, range];\n};\n\nexport const calculateAppropriateBarWidth = (data: number[] | Date[], totalWidth: number, innerPadding: number) => {\n  const result = getClosestPairDiffAndRange(data);\n  if (!result || result[1] === 0) {\n    return 16;\n  }\n  const [closestPairDiff, range] = result;\n  // Refer to https://microsoft.github.io/fluentui-charting-contrib/docs/rfcs/fix-overlapping-bars-on-continuous-axes\n  // for the derivation of the following formula.\n  const barWidth = Math.floor(\n    (totalWidth * closestPairDiff * (1 - innerPadding)) / (range + closestPairDiff * (1 - innerPadding)),\n  );\n  return barWidth;\n};\n\n/**\n * Calculates the total width available for rendering bars.\n */\nexport const calcTotalWidth = (containerWidth: number, margins: IMargins, extraMargin = 0): number => {\n  return containerWidth - (margins.left || 0) - (margins.right || 0) - extraMargin * 2;\n};\n\n/**\n * Calculates the combined size of all bands and the gaps between them, in units relative to the bandwidth.\n */\nexport const calcTotalBandUnits = (numBands: number, innerPadding: number) => {\n  // inner_padding = space_between_bands / (space_between_bands + bandwidth)\n  // => space_between_bands = (inner_padding / (1 - inner_padding)) * bandwidth\n  const gapToBandRatio = innerPadding / (1 - innerPadding);\n  return numBands + (numBands - 1) * gapToBandRatio;\n};\n\n/**\n * Calculates the total width required to render all bands including the gaps between them.\n */\nexport const calcRequiredWidth = (bandwidth: number, numBands: number, innerPadding: number) => {\n  return bandwidth * calcTotalBandUnits(numBands, innerPadding);\n};\n\n/**\n * Calculates the maximum possible bandwidth such that the combined widths of all bands\n * and the gaps between them exactly fill the total available width.\n */\nexport const calcBandwidth = (totalWidth: number, numBands: number, innerPadding: number) => {\n  return totalWidth / calcTotalBandUnits(numBands, innerPadding);\n};\n"]}

package/lib-commonjs/components/CommonComponents/CartesianChart.base.d.ts

@@ -6,8 +6,6 @@ export interface ICartesianChartState {
     containerHeight: number;
     _width: number;
     _height: number;
-    isRemoveValCalculated?: boolean;
-    _removalValueForTextTuncate?: number;
     startFromX: number;
 }
 /**
@@ -32,6 +30,7 @@ export declare class CartesianChartBase extends React.Component<IModifiedCartesi
     private _tickValues;
     private titleMargin;
     private _isFirstRender;
+    private _removalValueForTextTuncate;
     private _xScale;
     private isIntegralDataset;
     private _tooltipId;
@@ -62,4 +61,6 @@ export declare class CartesianChartBase extends React.Component<IModifiedCartesi
     private _calculateChartMinWidth;
     private _getChartDescription;
     private _getAxisTitle;
+    private _calcMaxLabelWidthWithTransform;
+    private _transformXAxisLabels;
 }

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

@@ -34,6 +34,13 @@ var CartesianChartBase = /** @class */ (function (_super) {
         _this.minLegendContainerHeight = 32;
         _this._isRtl = (0, Utilities_1.getRTL)();
         _this._isFirstRender = true;
+        /* Used for when WrapXAxisLabels props appeared.
+         * To display the total word (space separated words), Need to have more space than usual.
+         * This height will get total height need to disaply total word.
+         * These value need to be removed from actual svg height/graph height.
+         * Defalut value is 0. And this values calculted when 'wrapXAxisLables' or 'showXAxisLablesTooltip' is true.
+         */
+        _this._removalValueForTextTuncate = 0;
         _this.isIntegralDataset = true;
         _this.calculateMaxYAxisLabelLength = function (className) {
             var formatTickLabel = function (str) {
@@ -71,43 +78,14 @@ var CartesianChartBase = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         _this._getData = function (xScale, yScalePrimary, yScaleSecondary) {
             _this.props.getGraphData &&
-                _this.props.getGraphData(xScale, yScalePrimary, _this.state.containerHeight - _this.state._removalValueForTextTuncate, _this.state.containerWidth, _this.xAxisElement, _this.yAxisElement, yScaleSecondary);
+                _this.props.getGraphData(xScale, yScalePrimary, _this.state.containerHeight - _this._removalValueForTextTuncate, _this.state.containerWidth, _this.xAxisElement, _this.yAxisElement, yScaleSecondary);
         };
         _this._onChartLeave = function () {
             _this.props.onChartMouseLeave && _this.props.onChartMouseLeave();
         };
         _this._calculateChartMinWidth = function () {
-            var labelWidth = 10; // Total padding on the left and right sides of the label
-            // Case: rotated labels
-            if (!_this.props.wrapXAxisLables &&
-                _this.props.rotateXAxisLables &&
-                _this.props.xAxisType === index_1.XAxisTypes.StringAxis) {
-                var longestLabelWidth = (0, index_1.calculateLongestLabelWidth)(_this._tickValues, ".".concat(_this._classNames.xAxis, " text"));
-                labelWidth += Math.ceil(longestLabelWidth * Math.cos(Math.PI / 4));
-            }
-            // Case: truncated labels
-            else if (_this.props.showXAxisLablesTooltip) {
-                var tickValues = _this._tickValues.map(function (val) {
-                    var numChars = _this.props.noOfCharsToTruncate || 4;
-                    return val.toString().length > numChars ? "".concat(val.toString().slice(0, numChars), "...") : val;
-                });
-                var longestLabelWidth = (0, index_1.calculateLongestLabelWidth)(tickValues, ".".concat(_this._classNames.xAxis, " text"));
-                labelWidth += Math.ceil(longestLabelWidth);
-            }
-            // Case: wrapped labels
-            else if (_this.props.wrapXAxisLables) {
-                var words_1 = [];
-                _this._tickValues.forEach(function (val) {
-                    words_1.push.apply(words_1, val.toString().split(/\s+/));
-                });
-                var longestLabelWidth = (0, index_1.calculateLongestLabelWidth)(words_1, ".".concat(_this._classNames.xAxis, " text"));
-                labelWidth += Math.max(Math.ceil(longestLabelWidth), 10);
-            }
-            // Default case
-            else {
-                var longestLabelWidth = (0, index_1.calculateLongestLabelWidth)(_this._tickValues, ".".concat(_this._classNames.xAxis, " text"));
-                labelWidth += Math.ceil(longestLabelWidth);
-            }
+            // Adding 10px for padding on both sides
+            var labelWidth = _this._calcMaxLabelWidthWithTransform(_this._tickValues) + 10;
             var minChartWidth = _this.margins.left + _this.margins.right + labelWidth * (_this._tickValues.length - 1);
             if ([index_1.ChartTypes.GroupedVerticalBarChart, index_1.ChartTypes.VerticalBarChart, index_1.ChartTypes.VerticalStackedBarChart].includes(_this.props.chartType)) {
                 var minDomainMargin = 8;
@@ -133,13 +111,85 @@ var CartesianChartBase = /** @class */ (function (_super) {
                             : 'values')) +
                 '. ');
         };
+        _this._calcMaxLabelWidthWithTransform = function (x) {
+            // Case: rotated labels
+            if (!_this.props.wrapXAxisLables &&
+                _this.props.rotateXAxisLables &&
+                _this.props.xAxisType === index_1.XAxisTypes.StringAxis) {
+                var longestLabelWidth_1 = (0, index_1.calculateLongestLabelWidth)(x, ".".concat(_this._classNames.xAxis, " text"));
+                return Math.ceil(longestLabelWidth_1 * Math.cos(Math.PI / 4));
+            }
+            // Case: truncated labels
+            if (_this.props.showXAxisLablesTooltip) {
+                var tickValues = x.map(function (val) {
+                    var numChars = _this.props.noOfCharsToTruncate || 4;
+                    return val.toString().length > numChars ? "".concat(val.toString().slice(0, numChars), "...") : val;
+                });
+                var longestLabelWidth_2 = (0, index_1.calculateLongestLabelWidth)(tickValues, ".".concat(_this._classNames.xAxis, " text"));
+                return Math.ceil(longestLabelWidth_2);
+            }
+            // Case: wrapped labels
+            if (_this.props.wrapXAxisLables) {
+                // FIXME: Calculate the max width of lines instead of words. This requires applying
+                // the wrapping transformation earlier to obtain the actual rendered lines.
+                var words_1 = [];
+                x.forEach(function (val) {
+                    words_1.push.apply(words_1, val.toString().split(/\s+/));
+                });
+                // This approach works well in most cases, since overflow typically occurs only when
+                // a single word exceeds the specified width — otherwise, the text will wrap as expected.
+                var longestLabelWidth_3 = (0, index_1.calculateLongestLabelWidth)(words_1, ".".concat(_this._classNames.xAxis, " text"));
+                return Math.max(Math.ceil(longestLabelWidth_3), index_1.DEFAULT_WRAP_WIDTH);
+            }
+            // Default case
+            var longestLabelWidth = (0, index_1.calculateLongestLabelWidth)(x, ".".concat(_this._classNames.xAxis, " text"));
+            return Math.ceil(longestLabelWidth);
+        };
+        _this._transformXAxisLabels = function () {
+            var _a, _b, _c;
+            _this._removalValueForTextTuncate = 0;
+            /*
+             * To enable wrapping of x axis tick values or to display complete x axis tick values,
+             * we need to calculate how much space it needed to render the text.
+             * No need to re-calculate every time the chart renders and same time need to get an update. So using setState.
+             * Required space will be calculated first time chart rendering and if any width/height of chart updated.
+             * */
+            if (_this.props.wrapXAxisLables || _this.props.showXAxisLablesTooltip) {
+                var maxXAxisLabelWidth = void 0;
+                if (_this.props.xAxisType === index_1.XAxisTypes.StringAxis) {
+                    if ((((_a = _this.props.datasetForXAxisDomain) === null || _a === void 0 ? void 0 : _a.length) || 0) > 1) {
+                        maxXAxisLabelWidth = _this._xScale.step();
+                    }
+                    else {
+                        maxXAxisLabelWidth = _this.state.containerWidth;
+                    }
+                }
+                var wrapLabelProps = {
+                    node: _this.xAxisElement,
+                    xAxis: _this._xScale,
+                    showXAxisLablesTooltip: _this.props.showXAxisLablesTooltip || false,
+                    noOfCharsToTruncate: _this.props.noOfCharsToTruncate || 4,
+                    width: maxXAxisLabelWidth,
+                };
+                _this._removalValueForTextTuncate = (_b = (0, index_1.createWrapOfXLabels)(wrapLabelProps)) !== null && _b !== void 0 ? _b : 0;
+            }
+            if (!_this.props.wrapXAxisLables &&
+                _this.props.rotateXAxisLables &&
+                _this.props.xAxisType === index_1.XAxisTypes.StringAxis) {
+                var rotateLabelProps = {
+                    node: _this.xAxisElement,
+                    xAxis: _this._xScale,
+                };
+                var rotatedHeight = (_c = (0, index_1.rotateXAxisLabels)(rotateLabelProps)) !== null && _c !== void 0 ? _c : 0;
+                // this.margins.bottom is used as padding here
+                _this._removalValueForTextTuncate = rotatedHeight + _this.margins.bottom;
+            }
+        };
         _this.state = {
             containerHeight: 0,
             containerWidth: 0,
             _width: _this.props.width || 600,
             _height: _this.props.height || 350,
-            _removalValueForTextTuncate: 0,
-            isRemoveValCalculated: true,
             startFromX: 0,
         };
         _this.idForGraph = (0, Utilities_1.getId)('chart_');
@@ -227,23 +277,6 @@ var CartesianChartBase = /** @class */ (function (_super) {
         if (prevProps.height !== this.props.height || prevProps.width !== this.props.width) {
             this._fitParentContainer();
         }
-        if (!this.props.wrapXAxisLables &&
-            this.props.rotateXAxisLables &&
-            this.props.xAxisType === index_1.XAxisTypes.StringAxis) {
-            var rotateLabelProps = {
-                node: this.xAxisElement,
-                xAxis: this._xScale,
-            };
-            var rotatedHeight = (0, index_1.rotateXAxisLabels)(rotateLabelProps);
-            if (this.state.isRemoveValCalculated &&
-                this.state._removalValueForTextTuncate !== rotatedHeight + this.margins.bottom &&
-                rotatedHeight > 0) {
-                this.setState({
-                    _removalValueForTextTuncate: rotatedHeight + this.margins.bottom,
-                    isRemoveValCalculated: false,
-                });
-            }
-        }
         if (chartTypesWithStringYAxis.includes(this.props.chartType) &&
             this.props.showYAxisLables &&
             this.yAxisElement &&
@@ -303,7 +336,13 @@ var CartesianChartBase = /** @class */ (function (_super) {
                 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),
-                containerHeight: this.state.containerHeight - this.state._removalValueForTextTuncate,
+                // 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
+                // will only be available in the next render, as it's set after the axis is created.
+                // Solution: Delay the creation of gridlines until after the transformation has been applied,
+                // or precompute the required height for transformed labels (_removalValueForTextTuncate).
+                containerHeight: this.state.containerHeight - this._removalValueForTextTuncate,
                 margins: this.margins,
                 xAxisElement: this.xAxisElement,
                 showRoundOffXTickValues: (_e = this.props.showRoundOffXTickValues) !== null && _e !== void 0 ? _e : true,
@@ -314,27 +353,8 @@ var CartesianChartBase = /** @class */ (function (_super) {
                 xAxisInnerPadding: this.props.xAxisInnerPadding,
                 xAxisOuterPadding: this.props.xAxisOuterPadding,
                 containerWidth: this.state.containerWidth,
-                hideTickOverlap: this.props.hideTickOverlap &&
-                    !this.props.rotateXAxisLables &&
-                    !this.props.showXAxisLablesTooltip &&
-                    !this.props.wrapXAxisLables,
-            };
-            var YAxisParams = {
-                margins: this.props.getYDomainMargins ? this.props.getYDomainMargins(this.state.containerHeight) : this.margins,
-                containerWidth: this.state.containerWidth,
-                containerHeight: this.state.containerHeight - this.state._removalValueForTextTuncate,
-                yAxisElement: this.yAxisElement,
-                yAxisTickFormat: this.props.yAxisTickFormat,
-                yAxisTickCount: this.props.yAxisTickCount,
-                yMinValue: this.props.yMinValue || 0,
-                yMaxValue: this.props.yMaxValue || 0,
-                tickPadding: 10,
-                maxOfYVal: this.props.maxOfYVal,
-                yMinMaxValues: this.props.getMinMaxOfYAxis(points, this.props.yAxisType),
-                // please note these padding default values must be consistent in here
-                // and the parent chart(HBWA/Vertical etc..) for more details refer example
-                // http://using-d3js.com/04_07_ordinal_scales.html
-                yAxisPadding: this.props.yAxisPadding || 0,
+                hideTickOverlap: this.props.hideTickOverlap,
+                calcMaxLabelWidth: this._calcMaxLabelWidthWithTransform,
             };
             /**
              * These scales used for 2 purposes.
@@ -360,25 +380,24 @@ var CartesianChartBase = /** @class */ (function (_super) {
             }
             this._xScale = xScale;
             this._tickValues = tickValues;
-            /*
-             * To enable wrapping of x axis tick values or to display complete x axis tick values,
-             * we need to calculate how much space it needed to render the text.
-             * No need to re-calculate every time the chart renders and same time need to get an update. So using setState.
-             * Required space will be calculated first time chart rendering and if any width/height of chart updated.
-             * */
-            if (this.props.wrapXAxisLables || this.props.showXAxisLablesTooltip) {
-                var wrapLabelProps = {
-                    node: this.xAxisElement,
-                    xAxis: xScale,
-                    showXAxisLablesTooltip: this.props.showXAxisLablesTooltip || false,
-                    noOfCharsToTruncate: this.props.noOfCharsToTruncate || 4,
-                };
-                var temp = xScale && (0, index_1.createWrapOfXLabels)(wrapLabelProps);
-                // this value need to be updated for draw graph updated. So instead of using private value, using set state.
-                if (this.state.isRemoveValCalculated && this.state._removalValueForTextTuncate !== temp) {
-                    this.setState({ _removalValueForTextTuncate: temp, isRemoveValCalculated: false });
-                }
-            }
+            this._transformXAxisLabels();
+            var YAxisParams = {
+                margins: this.props.getYDomainMargins ? this.props.getYDomainMargins(this.state.containerHeight) : this.margins,
+                containerWidth: this.state.containerWidth,
+                containerHeight: this.state.containerHeight - this._removalValueForTextTuncate,
+                yAxisElement: this.yAxisElement,
+                yAxisTickFormat: this.props.yAxisTickFormat,
+                yAxisTickCount: this.props.yAxisTickCount,
+                yMinValue: this.props.yMinValue || 0,
+                yMaxValue: this.props.yMaxValue || 0,
+                tickPadding: 10,
+                maxOfYVal: this.props.maxOfYVal,
+                yMinMaxValues: this.props.getMinMaxOfYAxis(points, this.props.yAxisType),
+                // please note these padding default values must be consistent in here
+                // and the parent chart(HBWA/Vertical etc..) for more details refer example
+                // http://using-d3js.com/04_07_ordinal_scales.html
+                yAxisPadding: this.props.yAxisPadding || 0,
+            };
             /**
              * These scales used for 2 purposes.
              * 1. To create x and y axis
@@ -403,7 +422,7 @@ var CartesianChartBase = /** @class */ (function (_super) {
                     var YAxisParamsSecondary = {
                         margins: this.margins,
                         containerWidth: this.state.containerWidth,
-                        containerHeight: this.state.containerHeight - this.state._removalValueForTextTuncate,
+                        containerHeight: this.state.containerHeight - this._removalValueForTextTuncate,
                         yAxisElement: this.yAxisElementSecondary,
                         yAxisTickFormat: this.props.yAxisTickFormat,
                         yAxisTickCount: this.props.yAxisTickCount,
@@ -476,7 +495,7 @@ var CartesianChartBase = /** @class */ (function (_super) {
         var yAxisTitleMaximumAllowedHeight = svgDimensions.height -
             this.margins.bottom -
             this.margins.top -
-            this.state._removalValueForTextTuncate -
+            this._removalValueForTextTuncate -
             this.titleMargin;
         var commonSvgToolTipProps = {
             wrapContent: index_1.wrapContent,
@@ -512,7 +531,7 @@ var CartesianChartBase = /** @class */ (function (_super) {
                             _this.xAxisElement = e;
                         }, id: "xAxisGElement".concat(this.idForGraph), 
                         // 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.state._removalValueForTextTuncate, ")"), className: this._classNames.xAxis }),
+                        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,
@@ -539,8 +558,7 @@ var CartesianChartBase = /** @class */ (function (_super) {
                                 ? this.margins.left + this.state.startFromX
                                 : svgDimensions.width - this.margins.right - this.state.startFromX, ", 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.state._removalValueForTextTuncate,
+                                x: (yAxisTitleMaximumAllowedHeight - this.margins.bottom) / 2 + this._removalValueForTextTuncate,
                                 y: this._isRtl
                                     ? this.state.startFromX - this.titleMargin
                                     : svgDimensions.width - this.margins.right,
@@ -553,8 +571,7 @@ var CartesianChartBase = /** @class */ (function (_super) {
                             }, maxWidth: yAxisTitleMaximumAllowedHeight }, 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.state._removalValueForTextTuncate,
+                            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,
@@ -566,8 +583,7 @@ var CartesianChartBase = /** @class */ (function (_super) {
                     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.state._removalValueForTextTuncate,
+                            x: (yAxisTitleMaximumAllowedHeight - this.margins.bottom) / 2 + this._removalValueForTextTuncate,
                             y: this._isRtl
                                 ? this.state.startFromX - this.titleMargin
                                 : svgDimensions.width - this.margins.right,