@fluentui/react-charts 9.2.1 → 9.2.3

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

@@ -36,15 +36,20 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     let _xScale;
     let isIntegralDataset = true;
     let _tooltipId = (0, _reactutilities.useId)('tooltip_');
+    /* 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.
+   */ let _removalValueForTextTuncate = 0;
     const [containerWidth, setContainerWidth] = _react.useState(0);
     const [containerHeight, setContainerHeight] = _react.useState(0);
-    const [isRemoveValCalculated, setIsRemoveValCalculated] = _react.useState(true);
-    const [removalValueForTextTuncate, setRemovalValueForTextTuncate] = _react.useState(0);
     const [startFromX, setStartFromX] = _react.useState(0);
     const [prevProps, setPrevProps] = _react.useState(null);
-    const chartTypesToCheck = [
+    const chartTypesWithStringYAxis = [
         _index.ChartTypes.HorizontalBarChartWithAxis,
         _index.ChartTypes.HeatMapChart,
+        _index.ChartTypes.VerticalStackedBarChart,
         _index.ChartTypes.GanttChart
     ];
     var _props_margins_top, _props_margins_bottom, _props_margins_left, _props_margins_right, _props_margins_right1, _props_margins_left1;
@@ -60,17 +65,34 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         right: _useRtl ? (_props_margins_left = (_props_margins2 = props.margins) === null || _props_margins2 === void 0 ? void 0 : _props_margins2.left) !== null && _props_margins_left !== void 0 ? _props_margins_left : 40 : ((_props_margins_right = (_props_margins3 = props.margins) === null || _props_margins3 === void 0 ? void 0 : _props_margins3.right) !== null && _props_margins_right !== void 0 ? _props_margins_right : props === null || props === void 0 ? void 0 : props.secondaryYScaleOptions) ? 40 : 20,
         left: _useRtl ? ((_props_margins_right1 = (_props_margins4 = props.margins) === null || _props_margins4 === void 0 ? void 0 : _props_margins4.right) !== null && _props_margins_right1 !== void 0 ? _props_margins_right1 : props === null || props === void 0 ? void 0 : props.secondaryYScaleOptions) ? 40 : 20 : (_props_margins_left1 = (_props_margins5 = props.margins) === null || _props_margins5 === void 0 ? void 0 : _props_margins5.left) !== null && _props_margins_left1 !== void 0 ? _props_margins_left1 : 40
     };
+    const TITLE_MARGIN = 20;
     if (props.xAxisTitle !== undefined && props.xAxisTitle !== '') {
         var _props_margins6;
         var _props_margins_bottom1;
-        margins.bottom = (_props_margins_bottom1 = (_props_margins6 = props.margins) === null || _props_margins6 === void 0 ? void 0 : _props_margins6.bottom) !== null && _props_margins_bottom1 !== void 0 ? _props_margins_bottom1 : 55;
+        margins.bottom = (_props_margins_bottom1 = (_props_margins6 = props.margins) === null || _props_margins6 === void 0 ? void 0 : _props_margins6.bottom) !== null && _props_margins_bottom1 !== void 0 ? _props_margins_bottom1 : margins.bottom + TITLE_MARGIN;
     }
     if (props.yAxisTitle !== undefined && props.yAxisTitle !== '') {
         var _props_margins7, _props_margins8, _props_margins9, _props_margins10;
         var _props_margins_right2, _props_margins_left2;
-        margins.left = _useRtl ? ((_props_margins_right2 = (_props_margins7 = props.margins) === null || _props_margins7 === void 0 ? void 0 : _props_margins7.right) !== null && _props_margins_right2 !== void 0 ? _props_margins_right2 : props === null || props === void 0 ? void 0 : props.secondaryYAxistitle) ? 80 : 40 : (_props_margins_left2 = (_props_margins8 = props.margins) === null || _props_margins8 === void 0 ? void 0 : _props_margins8.left) !== null && _props_margins_left2 !== void 0 ? _props_margins_left2 : 60;
+        margins.left = _useRtl ? ((_props_margins_right2 = (_props_margins7 = props.margins) === null || _props_margins7 === void 0 ? void 0 : _props_margins7.right) !== null && _props_margins_right2 !== void 0 ? _props_margins_right2 : props === null || props === void 0 ? void 0 : props.secondaryYAxistitle) ? margins.right + 2 * TITLE_MARGIN : margins.right + TITLE_MARGIN : (_props_margins_left2 = (_props_margins8 = props.margins) === null || _props_margins8 === void 0 ? void 0 : _props_margins8.left) !== null && _props_margins_left2 !== void 0 ? _props_margins_left2 : margins.left + TITLE_MARGIN;
         var _props_margins_left3, _props_margins_right3;
-        margins.right = _useRtl ? (_props_margins_left3 = (_props_margins9 = props.margins) === null || _props_margins9 === void 0 ? void 0 : _props_margins9.left) !== null && _props_margins_left3 !== void 0 ? _props_margins_left3 : 60 : ((_props_margins_right3 = (_props_margins10 = props.margins) === null || _props_margins10 === void 0 ? void 0 : _props_margins10.right) !== null && _props_margins_right3 !== void 0 ? _props_margins_right3 : props === null || props === void 0 ? void 0 : props.secondaryYAxistitle) ? 80 : 40;
+        margins.right = _useRtl ? (_props_margins_left3 = (_props_margins9 = props.margins) === null || _props_margins9 === void 0 ? void 0 : _props_margins9.left) !== null && _props_margins_left3 !== void 0 ? _props_margins_left3 : margins.left + TITLE_MARGIN : ((_props_margins_right3 = (_props_margins10 = props.margins) === null || _props_margins10 === void 0 ? void 0 : _props_margins10.right) !== null && _props_margins_right3 !== void 0 ? _props_margins_right3 : props === null || props === void 0 ? void 0 : props.secondaryYAxistitle) ? margins.right + 2 * TITLE_MARGIN : margins.right + TITLE_MARGIN;
+    }
+    if (props.xAxisAnnotation !== undefined && props.xAxisAnnotation !== '') {
+        var _props_margins11;
+        var _props_margins_top1;
+        margins.top = (_props_margins_top1 = (_props_margins11 = props.margins) === null || _props_margins11 === void 0 ? void 0 : _props_margins11.top) !== null && _props_margins_top1 !== void 0 ? _props_margins_top1 : margins.top + TITLE_MARGIN;
+    }
+    if (props.yAxisAnnotation !== undefined && props.yAxisAnnotation !== '' && (props.secondaryYAxistitle === undefined || props.secondaryYAxistitle === '')) {
+        if (_useRtl) {
+            var _props_margins12;
+            var _props_margins_right4;
+            margins.left = (_props_margins_right4 = (_props_margins12 = props.margins) === null || _props_margins12 === void 0 ? void 0 : _props_margins12.right) !== null && _props_margins_right4 !== void 0 ? _props_margins_right4 : margins.right + TITLE_MARGIN;
+        } else {
+            var _props_margins13;
+            var _props_margins_right5;
+            margins.right = (_props_margins_right5 = (_props_margins13 = props.margins) === null || _props_margins13 === void 0 ? void 0 : _props_margins13.right) !== null && _props_margins_right5 !== void 0 ? _props_margins_right5 : margins.right + TITLE_MARGIN;
+        }
     }
     const classes = (0, _useCartesianChartStylesstyles.useCartesianChartStyles)(props);
     const focusAttributes = (0, _reacttabster.useFocusableGroup)();
@@ -83,8 +105,8 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         if (props !== null) {
             setPrevProps(props);
         }
-        if (chartTypesToCheck.includes(props.chartType) && props.showYAxisLables && yAxisElement) {
-            const maxYAxisLabelLength = calculateMaxYAxisLabelLength(props.chartType, props.points, classes.yAxis);
+        if (chartTypesWithStringYAxis.includes(props.chartType) && props.showYAxisLables && yAxisElement && props.yAxisType === _index.YAxisType.StringAxis) {
+            const maxYAxisLabelLength = calculateMaxYAxisLabelLength(classes.yAxis);
             if (startFromX !== maxYAxisLabelLength) {
                 setStartFromX(maxYAxisLabelLength);
             }
@@ -106,8 +128,8 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                 _fitParentContainer();
             }
         }
-        if (chartTypesToCheck.includes(props.chartType) && props.showYAxisLables && yAxisElement) {
-            const maxYAxisLabelLength = calculateMaxYAxisLabelLength(props.chartType, props.points, classes.yAxis);
+        if (chartTypesWithStringYAxis.includes(props.chartType) && props.showYAxisLables && yAxisElement && props.yAxisType === _index.YAxisType.StringAxis) {
+            const maxYAxisLabelLength = calculateMaxYAxisLabelLength(classes.yAxis);
             if (startFromX !== maxYAxisLabelLength) {
                 setStartFromX(maxYAxisLabelLength);
             }
@@ -122,19 +144,6 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         props,
         prevProps
     ]);
-    _react.useEffect(()=>{
-        if (!props.wrapXAxisLables && props.rotateXAxisLables && props.xAxisType === _index.XAxisTypes.StringAxis) {
-            const rotateLabelProps = {
-                node: xAxisElement.current,
-                xAxis: _xScale
-            };
-            const rotatedHeight = (0, _index.rotateXAxisLabels)(rotateLabelProps);
-            if (isRemoveValCalculated && removalValueForTextTuncate !== rotatedHeight + margins.bottom && rotatedHeight > 0) {
-                setRemovalValueForTextTuncate(rotatedHeight + margins.bottom);
-                setIsRemoveValCalculated(false);
-            }
-        }
-    });
     _react.useImperativeHandle(props.componentRef, ()=>{
         var _chartContainer_current;
         return {
@@ -151,19 +160,14 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     function _generateCallout(calloutProps) {
         return /*#__PURE__*/ _react.createElement(_ChartPopover.ChartPopover, calloutProps);
     }
-    function calculateMaxYAxisLabelLength(chartType, points, className) {
+    function calculateMaxYAxisLabelLength(className) {
         const formatTickLabel = (str)=>{
             if (props.showYAxisLablesTooltip) {
                 return (0, _index.truncateString)(str, props.noOfCharsToTruncate || 4);
             }
             return str;
         };
-        if (chartType === _index.ChartTypes.HeatMapChart) {
-            var _points__data, _points_;
-            return (0, _index.calculateLongestLabelWidth)((_points_ = points[0]) === null || _points_ === void 0 ? void 0 : (_points__data = _points_.data) === null || _points__data === void 0 ? void 0 : _points__data.map((point)=>formatTickLabel(`${point.y}`)), `.${className} text`);
-        } else {
-            return (0, _index.calculateLongestLabelWidth)(points === null || points === void 0 ? void 0 : points.map((point)=>formatTickLabel(`${point.y}`)), `.${className} text`);
-        }
+        return (0, _index.calculateLongestLabelWidth)(props.stringDatasetForYAxisDomain.map((label)=>formatTickLabel(label)), `.${className} text`);
     }
     const { calloutProps, points, chartType, svgProps, culture, dateLocalizeOptions, timeFormatLocale, customDateTimeFormatter } = props;
     if (props.parentRef) {
@@ -172,7 +176,8 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     const margin = {
         ...margins
     };
-    if (chartTypesToCheck.includes(props.chartType)) {
+    // Note: This check is unnecessary since startFromX is only set for charts with string y-axis.
+    if (chartTypesWithStringYAxis.includes(props.chartType)) {
         if (!_useRtl) {
             margin.left += startFromX;
         } else {
@@ -188,7 +193,13 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         var _props_showRoundOffXTickValues;
         const XAxisParams = {
             domainNRangeValues: props.getDomainNRangeValues(points, props.getDomainMargins ? props.getDomainMargins(containerWidth) : margins, containerWidth, chartType, _useRtl, props.xAxisType, props.barwidth, props.tickValues, startFromX),
-            containerHeight: containerHeight - 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: containerHeight - _removalValueForTextTuncate,
             margins: margins,
             xAxisElement: xAxisElement.current,
             showRoundOffXTickValues: (_props_showRoundOffXTickValues = props.showRoundOffXTickValues) !== null && _props_showRoundOffXTickValues !== void 0 ? _props_showRoundOffXTickValues : true,
@@ -199,24 +210,8 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             xAxisInnerPadding: props.xAxisInnerPadding,
             xAxisOuterPadding: props.xAxisOuterPadding,
             containerWidth: containerWidth,
-            hideTickOverlap: props.hideTickOverlap && !props.rotateXAxisLables && !props.showXAxisLablesTooltip && !props.wrapXAxisLables
-        };
-        const YAxisParams = {
-            margins: props.getYDomainMargins ? props.getYDomainMargins(containerHeight) : margins,
-            containerWidth: containerWidth,
-            containerHeight: containerHeight - removalValueForTextTuncate,
-            yAxisElement: yAxisElement.current,
-            yAxisTickFormat: props.yAxisTickFormat,
-            yAxisTickCount: props.yAxisTickCount,
-            yMinValue: props.yMinValue || 0,
-            yMaxValue: props.yMaxValue || 0,
-            tickPadding: props.showYAxisLablesTooltip ? 15 : 10,
-            maxOfYVal: props.maxOfYVal,
-            yMinMaxValues: props.getMinMaxOfYAxis(points, 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: props.yAxisPadding || 0
+            hideTickOverlap: props.rotateXAxisLables ? false : props.hideTickOverlap,
+            calcMaxLabelWidth: _calcMaxLabelWidthWithTransform
         };
         /**
      * These scales used for 2 purposes.
@@ -241,25 +236,24 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         }
         _xScale = xScale;
         _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 set
-     * Required space will be calculated first time chart rendering and if any width/height of chart updated.
-     * */ if (props.wrapXAxisLables || props.showXAxisLablesTooltip) {
-            const wrapLabelProps = {
-                node: xAxisElement.current,
-                xAxis: xScale,
-                showXAxisLablesTooltip: props.showXAxisLablesTooltip || false,
-                noOfCharsToTruncate: props.noOfCharsToTruncate || 4
-            };
-            const temp = xScale && (0, _index.createWrapOfXLabels)(wrapLabelProps);
-            // this value need to be updated for draw graph updated. So instead of using private value, using set
-            if (isRemoveValCalculated && removalValueForTextTuncate !== temp) {
-                setRemovalValueForTextTuncate(temp);
-                setIsRemoveValCalculated(false);
-            }
-        }
+        _transformXAxisLabels();
+        const YAxisParams = {
+            margins: props.getYDomainMargins ? props.getYDomainMargins(containerHeight) : margins,
+            containerWidth: containerWidth,
+            containerHeight: containerHeight - _removalValueForTextTuncate,
+            yAxisElement: yAxisElement.current,
+            yAxisTickFormat: props.yAxisTickFormat,
+            yAxisTickCount: props.yAxisTickCount,
+            yMinValue: props.yMinValue || 0,
+            yMaxValue: props.yMaxValue || 0,
+            tickPadding: 10,
+            maxOfYVal: props.maxOfYVal,
+            yMinMaxValues: props.getMinMaxOfYAxis(points, 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: props.yAxisPadding || 0
+        };
         /**
      * These scales used for 2 purposes.
      * 1. To create x and y axis
@@ -273,7 +267,7 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             yAxisDomainValues: []
         };
         if (props.yAxisType && props.yAxisType === _index.YAxisType.StringAxis) {
-            yScalePrimary = props.createStringYAxis(YAxisParams, props.stringDatasetForYAxisDomain, _useRtl, props.barwidth);
+            yScalePrimary = props.createStringYAxis(YAxisParams, props.stringDatasetForYAxisDomain, _useRtl, props.barwidth, props.chartType);
         } else {
             // TODO: Since the scale domain values are now computed independently for both the primary and
             // secondary y-axes, the yMinValue and yMaxValue props are no longer necessary for accurately
@@ -286,7 +280,7 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
                 const YAxisParamsSecondary = {
                     margins: margins,
                     containerWidth: containerWidth,
-                    containerHeight: containerHeight - removalValueForTextTuncate,
+                    containerHeight: containerHeight - _removalValueForTextTuncate,
                     yAxisElement: yAxisElementSecondary.current,
                     yAxisTickFormat: props.yAxisTickFormat,
                     yAxisTickCount: props.yAxisTickCount,
@@ -300,7 +294,7 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             }
             yScalePrimary = props.createYAxis(YAxisParams, _useRtl, axisData, isIntegralDataset, chartType, false, props.roundedTicks);
         }
-        if (chartTypesToCheck.includes(props.chartType)) {
+        if (chartTypesWithStringYAxis.includes(props.chartType) && props.yAxisType === _index.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 _tooltipId)
@@ -333,7 +327,7 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         // Call back to the chart.
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const _getData = (xScale, yScalePrimary, yScaleSecondary)=>{
-            props.getGraphData && props.getGraphData(xScale, yScalePrimary, containerHeight - removalValueForTextTuncate, containerWidth, xAxisElement.current, yAxisElement.current, yScaleSecondary);
+            props.getGraphData && props.getGraphData(xScale, yScalePrimary, containerHeight - _removalValueForTextTuncate, containerWidth, xAxisElement.current, yAxisElement.current, yScaleSecondary);
         };
         props.getAxisData && props.getAxisData(axisData);
         // Callback function for chart, returns axis
@@ -354,7 +348,7 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         height: containerHeight
     };
     const xAxisTitleMaximumAllowedWidth = svgDimensions.width - margins.left - margins.right - startFromX;
-    const yAxisTitleMaximumAllowedHeight = svgDimensions.height - margins.bottom - margins.top - removalValueForTextTuncate - titleMargin;
+    const yAxisTitleMaximumAllowedHeight = svgDimensions.height - margins.bottom - margins.top - _removalValueForTextTuncate - titleMargin;
     /**
    * When screen resizes, along with screen, chart also auto adjusted.
    * This method used to adjust height and width of the charts.
@@ -385,39 +379,88 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         props.onChartMouseLeave && props.onChartMouseLeave();
     }
     function _calculateChartMinWidth() {
-        let labelWidth = 10; // Total padding on the left and right sides of the label
+        // Adding 10px for padding on both sides
+        const labelWidth = _calcMaxLabelWidthWithTransform(_tickValues) + 10;
+        let minChartWidth = margins.left + margins.right + labelWidth * (_tickValues.length - 1);
+        if ([
+            _index.ChartTypes.GroupedVerticalBarChart,
+            _index.ChartTypes.VerticalBarChart,
+            _index.ChartTypes.VerticalStackedBarChart
+        ].includes(props.chartType)) {
+            const minDomainMargin = 8;
+            minChartWidth += minDomainMargin * 2;
+        }
+        return minChartWidth;
+    }
+    function _calcMaxLabelWidthWithTransform(x) {
         // Case: rotated labels
         if (!props.wrapXAxisLables && props.rotateXAxisLables && props.xAxisType === _index.XAxisTypes.StringAxis) {
-            const longestLabelWidth = (0, _index.calculateLongestLabelWidth)(_tickValues, `.${classes.xAxis} text`);
-            labelWidth += Math.ceil(longestLabelWidth * Math.cos(Math.PI / 4));
-        } else if (props.showXAxisLablesTooltip) {
-            const tickValues = _tickValues.map((val)=>{
+            const longestLabelWidth = (0, _index.calculateLongestLabelWidth)(x, `.${classes.xAxis} text`);
+            return Math.ceil(longestLabelWidth * Math.cos(Math.PI / 4));
+        }
+        // Case: truncated labels
+        if (props.showXAxisLablesTooltip) {
+            const tickValues = x.map((val)=>{
                 const numChars = props.noOfCharsToTruncate || 4;
                 return val.toString().length > numChars ? `${val.toString().slice(0, numChars)}...` : val;
             });
             const longestLabelWidth = (0, _index.calculateLongestLabelWidth)(tickValues, `.${classes.xAxis} text`);
-            labelWidth += Math.ceil(longestLabelWidth);
-        } else if (props.wrapXAxisLables) {
+            return Math.ceil(longestLabelWidth);
+        }
+        // Case: wrapped labels
+        if (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.
             const words = [];
-            _tickValues.forEach((val)=>{
+            x.forEach((val)=>{
                 words.push(...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.
             const longestLabelWidth = (0, _index.calculateLongestLabelWidth)(words, `.${classes.xAxis} text`);
-            labelWidth += Math.max(Math.ceil(longestLabelWidth), 10);
-        } else {
-            const longestLabelWidth = (0, _index.calculateLongestLabelWidth)(_tickValues, `.${classes.xAxis} text`);
-            labelWidth += Math.ceil(longestLabelWidth);
+            return Math.max(Math.ceil(longestLabelWidth), _index.DEFAULT_WRAP_WIDTH);
         }
-        let minChartWidth = margins.left + margins.right + labelWidth * (_tickValues.length - 1);
-        if ([
-            _index.ChartTypes.GroupedVerticalBarChart,
-            _index.ChartTypes.VerticalBarChart,
-            _index.ChartTypes.VerticalStackedBarChart
-        ].includes(props.chartType)) {
-            const minDomainMargin = 8;
-            minChartWidth += minDomainMargin * 2;
+        // Default case
+        const longestLabelWidth = (0, _index.calculateLongestLabelWidth)(x, `.${classes.xAxis} text`);
+        return Math.ceil(longestLabelWidth);
+    }
+    function _transformXAxisLabels() {
+        _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 (props.wrapXAxisLables || props.showXAxisLablesTooltip) {
+            let maxXAxisLabelWidth;
+            if (props.xAxisType === _index.XAxisTypes.StringAxis) {
+                var _props_datasetForXAxisDomain;
+                if ((((_props_datasetForXAxisDomain = props.datasetForXAxisDomain) === null || _props_datasetForXAxisDomain === void 0 ? void 0 : _props_datasetForXAxisDomain.length) || 0) > 1) {
+                    maxXAxisLabelWidth = _xScale.step();
+                } else {
+                    maxXAxisLabelWidth = containerWidth;
+                }
+            }
+            const wrapLabelProps = {
+                node: xAxisElement.current,
+                xAxis: _xScale,
+                showXAxisLablesTooltip: props.showXAxisLablesTooltip || false,
+                noOfCharsToTruncate: props.noOfCharsToTruncate || 4,
+                width: maxXAxisLabelWidth
+            };
+            var _createWrapOfXLabels;
+            _removalValueForTextTuncate = (_createWrapOfXLabels = (0, _index.createWrapOfXLabels)(wrapLabelProps)) !== null && _createWrapOfXLabels !== void 0 ? _createWrapOfXLabels : 0;
+        }
+        if (!props.wrapXAxisLables && props.rotateXAxisLables && props.xAxisType === _index.XAxisTypes.StringAxis) {
+            const rotateLabelProps = {
+                node: xAxisElement.current,
+                xAxis: _xScale
+            };
+            var _rotateXAxisLabels;
+            const rotatedHeight = (_rotateXAxisLabels = (0, _index.rotateXAxisLabels)(rotateLabelProps)) !== null && _rotateXAxisLabels !== void 0 ? _rotateXAxisLabels : 0;
+            // margins.bottom is used as padding here
+            _removalValueForTextTuncate = rotatedHeight + margins.bottom;
         }
-        return minChartWidth;
     }
     /**
    * We have use the {@link defaultTabbableElement } to fix
@@ -462,7 +505,7 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         },
         id: `xAxisGElement${idForGraph}`,
         // To add wrap of x axis lables feature, need to remove word height from svg height.
-        transform: `translate(0, ${svgDimensions.height - margins.bottom - removalValueForTextTuncate})`,
+        transform: `translate(0, ${svgDimensions.height - margins.bottom - _removalValueForTextTuncate})`,
         className: classes.xAxis
     }), props.xAxisTitle !== undefined && props.xAxisTitle !== '' && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
         content: props.xAxisTitle,
@@ -476,6 +519,19 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         wrapContent: _index.wrapContent,
         showBackground: true,
         className: classes.svgTooltip
+    }), props.xAxisAnnotation !== undefined && props.xAxisAnnotation !== '' && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
+        content: props.xAxisAnnotation,
+        textProps: {
+            x: margins.left + startFromX + xAxisTitleMaximumAllowedWidth / 2,
+            y: titleMargin + 3,
+            className: classes.axisAnnotation,
+            textAnchor: 'middle',
+            'aria-hidden': true
+        },
+        maxWidth: xAxisTitleMaximumAllowedWidth,
+        wrapContent: _index.wrapContent,
+        showBackground: true,
+        className: classes.svgTooltip
     }), /*#__PURE__*/ _react.createElement("g", {
         ref: (e)=>{
             yAxisElement.current = e;
@@ -493,7 +549,7 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     }), props.secondaryYAxistitle !== undefined && props.secondaryYAxistitle !== '' && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
         content: props.secondaryYAxistitle,
         textProps: {
-            x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + removalValueForTextTuncate,
+            x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + _removalValueForTextTuncate,
             y: _useRtl ? startFromX - titleMargin : svgDimensions.width - margins.right,
             textAnchor: 'middle',
             transform: `translate(${_useRtl ? margins.right / 2 - titleMargin : margins.right / 2 + titleMargin},
@@ -507,7 +563,7 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     })), children, props.yAxisTitle !== undefined && props.yAxisTitle !== '' && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
         content: props.yAxisTitle,
         textProps: {
-            x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + removalValueForTextTuncate,
+            x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + _removalValueForTextTuncate,
             y: _useRtl ? svgDimensions.width - margins.right / 2 + titleMargin : margins.left / 2 - titleMargin,
             textAnchor: 'middle',
             transform: `translate(0,
@@ -518,6 +574,21 @@ const CartesianChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         wrapContent: _index.wrapContent,
         showBackground: true,
         className: classes.svgTooltip
+    }), props.yAxisAnnotation !== undefined && props.yAxisAnnotation !== '' && (props.secondaryYAxistitle === undefined || props.secondaryYAxistitle === '') && /*#__PURE__*/ _react.createElement(_SVGTooltipText.SVGTooltipText, {
+        content: props.yAxisAnnotation,
+        textProps: {
+            x: (yAxisTitleMaximumAllowedHeight - margins.bottom) / 2 + _removalValueForTextTuncate,
+            y: _useRtl ? startFromX - titleMargin : svgDimensions.width - margins.right,
+            textAnchor: 'middle',
+            transform: `translate(${_useRtl ? margins.right / 2 - titleMargin : margins.right / 2 + titleMargin},
+                   ${svgDimensions.height - margins.bottom - margins.top - titleMargin})rotate(-90)`,
+            className: classes.axisAnnotation,
+            'aria-hidden': true
+        },
+        maxWidth: yAxisTitleMaximumAllowedHeight,
+        wrapContent: _index.wrapContent,
+        showBackground: true,
+        className: classes.svgTooltip
     }))), !props.hideLegend && /*#__PURE__*/ _react.createElement("div", {
         ref: (e)=>legendContainer = e,
         className: classes.legendContainer