@fluentui/react-charting 5.24.6 → 5.24.8

package/lib/utilities/vbc-utils.js

@@ -28,4 +28,33 @@ export var calculateAppropriateBarWidth = function (data, totalWidth, innerPaddi
     var barWidth = Math.floor((totalWidth * closestPairDiff * (1 - innerPadding)) / (range + closestPairDiff * (1 - innerPadding)));
     return barWidth;
 };
+/**
+ * Calculates the total width available for rendering bars.
+ */
+export var calcTotalWidth = function (containerWidth, margins, extraMargin) {
+    if (extraMargin === void 0) { extraMargin = 0; }
+    return containerWidth - (margins.left || 0) - (margins.right || 0) - extraMargin * 2;
+};
+/**
+ * Calculates the combined size of all bands and the gaps between them, in units relative to the bandwidth.
+ */
+export 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;
+};
+/**
+ * Calculates the total width required to render all bands including the gaps between them.
+ */
+export var calcRequiredWidth = function (bandwidth, numBands, innerPadding) {
+    return bandwidth * calcTotalBandUnits(numBands, innerPadding);
+};
+/**
+ * Calculates the maximum possible bandwidth such that the combined widths of all bands
+ * and the gaps between them exactly fill the total available width.
+ */
+export var calcBandwidth = function (totalWidth, numBands, innerPadding) {
+    return totalWidth / calcTotalBandUnits(numBands, innerPadding);
+};
 //# sourceMappingURL=vbc-utils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"vbc-utils.js","sourceRoot":"../src/","sources":["utilities/vbc-utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,IAAM,0BAA0B,GAAG,UAAC,IAAuB;IAChE,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACpB,OAAO;IACT,CAAC;IACD,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,UAAC,CAAC,EAAE,CAAC;QACpB,OAAA,CAAC,YAAY,IAAI,CAAC,CAAC,CAAE,CAAU,CAAC,OAAO,EAAE,GAAI,CAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAE,CAAY,GAAI,CAAY;IAAjG,CAAiG,CAClG,CAAC;IACF,IAAI,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC;IAC/B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACrC,IAAM,IAAI,GACR,IAAI,CAAC,CAAC,CAAC,YAAY,IAAI;YACrB,CAAC,CAAE,IAAI,CAAC,CAAC,CAAU,CAAC,OAAO,EAAE,GAAI,IAAI,CAAC,CAAC,GAAG,CAAC,CAAU,CAAC,OAAO,EAAE;YAC/D,CAAC,CAAE,IAAI,CAAC,CAAC,CAAY,GAAI,IAAI,CAAC,CAAC,GAAG,CAAC,CAAY,CAAC;QACpD,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACpC,CAAC;IACD,IAAM,KAAK,GACT,IAAI,CAAC,CAAC,CAAC,YAAY,IAAI;QACrB,CAAC,CAAE,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAU,CAAC,OAAO,EAAE,GAAI,IAAI,CAAC,CAAC,CAAU,CAAC,OAAO,EAAE;QACzE,CAAC,CAAE,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAY,GAAI,IAAI,CAAC,CAAC,CAAY,CAAC;IAC9D,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAC1B,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,4BAA4B,GAAG,UAAC,IAAuB,EAAE,UAAkB,EAAE,YAAoB;IAC5G,IAAM,MAAM,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC;QAC/B,OAAO,EAAE,CAAC;IACZ,CAAC;IACM,IAAA,eAAe,GAAW,MAAM,GAAjB,EAAE,KAAK,GAAI,MAAM,GAAV,CAAW;IACxC,mHAAmH;IACnH,+CAA+C;IAC/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;IACF,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC","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-amd/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-amd/components/CommonComponents/CartesianChart.base.js

@@ -25,6 +25,13 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
             _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) {
@@ -62,43 +69,14 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
             // 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;
@@ -124,13 +102,85 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                                 : '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_');
@@ -218,23 +268,6 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
             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 &&
@@ -294,7 +327,13 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                     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,
@@ -305,27 +344,8 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                     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.
@@ -351,25 +371,24 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                 }
                 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
@@ -394,7 +413,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                         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,
@@ -467,7 +486,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
             var yAxisTitleMaximumAllowedHeight = svgDimensions.height -
                 this.margins.bottom -
                 this.margins.top -
-                this.state._removalValueForTextTuncate -
+                this._removalValueForTextTuncate -
                 this.titleMargin;
             var commonSvgToolTipProps = {
                 wrapContent: index_1.wrapContent,
@@ -503,7 +522,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                                 _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,
@@ -530,8 +549,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                                     ? 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,
@@ -544,8 +562,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                                 }, 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,
@@ -557,8 +574,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities",
                         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,