@fluentui/react-charts 9.2.1 → 9.2.3

package/lib/components/ChartTable/useChartTableStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","chartTableClassNames","root","table","headerCell","bodyCell","chart","useStyles","a9b677","B68tc82","po53p8","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","De3pzq","sj55zd","z8tnut","z189sj","Byoj8tv","uwmqm3","fsow6f","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bsw6fvg","Bbusuzp","d","m","useChartTableStyles","props","baseStyles"],"sources":["useChartTableStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n/**\n * @internal\n */ export const chartTableClassNames = {\n    root: 'fui-ChartTable__root',\n    table: 'fui-ChartTable__table',\n    headerCell: 'fui-ChartTable__headerCell',\n    bodyCell: 'fui-ChartTable__bodyCell',\n    chart: 'fui-ChartTable__chart'\n};\nconst useStyles = makeStyles({\n    root: {\n        width: '100%',\n        overflowX: 'auto'\n    },\n    table: {\n        borderCollapse: 'collapse'\n    },\n    headerCell: {\n        ...typographyStyles.caption1,\n        fontWeight: tokens.fontWeightSemibold,\n        backgroundColor: tokens.colorNeutralBackground3,\n        color: tokens.colorNeutralForeground1,\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        textAlign: 'left',\n        ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),\n        '@media (forced-colors: active)': {\n            backgroundColor: 'Window',\n            color: 'WindowText'\n        }\n    },\n    bodyCell: {\n        ...typographyStyles.caption1,\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),\n        color: tokens.colorNeutralForeground1,\n        textAlign: 'left',\n        '@media (forced-colors: active)': {\n            color: 'WindowText'\n        }\n    }\n});\n/**\n * Apply styling to the ChartTable slots based on the state\n */ export const useChartTableStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(chartTableClassNames.root, baseStyles.root /*props.styles?.root*/ ),\n        table: mergeClasses(chartTableClassNames.table, baseStyles.table /*props.styles?.table*/ ),\n        headerCell: mergeClasses(chartTableClassNames.headerCell, baseStyles.headerCell /*props.styles?.headerCell*/ ),\n        bodyCell: mergeClasses(chartTableClassNames.bodyCell, baseStyles.bodyCell /*props.styles?.bodyCell*/ ),\n        chart: mergeClasses(chartTableClassNames.chart /*props.styles?.chart*/ )\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE;AACA;AACA;AAAI,OAAO,MAAMC,oBAAoB,GAAG;EACpCC,IAAI,EAAE,sBAAsB;EAC5BC,KAAK,EAAE,uBAAuB;EAC9BC,UAAU,EAAE,4BAA4B;EACxCC,QAAQ,EAAE,0BAA0B;EACpCC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,SAAS,gBAAGX,QAAA;EAAAM,IAAA;IAAAM,MAAA;IAAAC,OAAA;EAAA;EAAAN,KAAA;IAAAO,MAAA;EAAA;EAAAN,UAAA;IAAAO,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAA9B,QAAA;IAAAM,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAjB,MAAA;IAAAK,MAAA;IAAAc,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA+BjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAIC,KAAK,IAAG;EAC5C,MAAMC,UAAU,GAAGjC,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHL,IAAI,EAAEL,YAAY,CAACI,oBAAoB,CAACC,IAAI,EAAEsC,UAAU,CAACtC,IAAI,CAAC,sBAAuB,CAAC;IACtFC,KAAK,EAAEN,YAAY,CAACI,oBAAoB,CAACE,KAAK,EAAEqC,UAAU,CAACrC,KAAK,CAAC,uBAAwB,CAAC;IAC1FC,UAAU,EAAEP,YAAY,CAACI,oBAAoB,CAACG,UAAU,EAAEoC,UAAU,CAACpC,UAAU,CAAC,4BAA6B,CAAC;IAC9GC,QAAQ,EAAER,YAAY,CAACI,oBAAoB,CAACI,QAAQ,EAAEmC,UAAU,CAACnC,QAAQ,CAAC,0BAA2B,CAAC;IACtGC,KAAK,EAAET,YAAY,CAACI,oBAAoB,CAACK,KAAK,CAAC,uBAAwB;EAC3E,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/ChartTable/useChartTableStyles.styles.raw.js

@@ -0,0 +1,55 @@
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+/**
+ * @internal
+ */ export const chartTableClassNames = {
+    root: 'fui-ChartTable__root',
+    table: 'fui-ChartTable__table',
+    headerCell: 'fui-ChartTable__headerCell',
+    bodyCell: 'fui-ChartTable__bodyCell',
+    chart: 'fui-ChartTable__chart'
+};
+const useStyles = makeStyles({
+    root: {
+        width: '100%',
+        overflowX: 'auto'
+    },
+    table: {
+        borderCollapse: 'collapse'
+    },
+    headerCell: {
+        ...typographyStyles.caption1,
+        fontWeight: tokens.fontWeightSemibold,
+        backgroundColor: tokens.colorNeutralBackground3,
+        color: tokens.colorNeutralForeground1,
+        ...shorthands.padding(tokens.spacingHorizontalS),
+        textAlign: 'left',
+        ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),
+        '@media (forced-colors: active)': {
+            backgroundColor: 'Window',
+            color: 'WindowText'
+        }
+    },
+    bodyCell: {
+        ...typographyStyles.caption1,
+        ...shorthands.padding(tokens.spacingHorizontalS),
+        ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),
+        color: tokens.colorNeutralForeground1,
+        textAlign: 'left',
+        '@media (forced-colors: active)': {
+            color: 'WindowText'
+        }
+    }
+});
+/**
+ * Apply styling to the ChartTable slots based on the state
+ */ export const useChartTableStyles = (props)=>{
+    const baseStyles = useStyles();
+    return {
+        root: mergeClasses(chartTableClassNames.root, baseStyles.root /*props.styles?.root*/ ),
+        table: mergeClasses(chartTableClassNames.table, baseStyles.table /*props.styles?.table*/ ),
+        headerCell: mergeClasses(chartTableClassNames.headerCell, baseStyles.headerCell /*props.styles?.headerCell*/ ),
+        bodyCell: mergeClasses(chartTableClassNames.bodyCell, baseStyles.bodyCell /*props.styles?.bodyCell*/ ),
+        chart: mergeClasses(chartTableClassNames.chart /*props.styles?.chart*/ )
+    };
+};

package/lib/components/ChartTable/useChartTableStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ChartTable/useChartTableStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { ChartTableProps, ChartTableStyles } from './ChartTable.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\n/**\n * @internal\n */\nexport const chartTableClassNames: SlotClassNames<ChartTableStyles> = {\n  root: 'fui-ChartTable__root',\n  table: 'fui-ChartTable__table',\n  headerCell: 'fui-ChartTable__headerCell',\n  bodyCell: 'fui-ChartTable__bodyCell',\n  chart: 'fui-ChartTable__chart',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    width: '100%',\n    overflowX: 'auto',\n  },\n  table: {\n    borderCollapse: 'collapse',\n  },\n  headerCell: {\n    ...typographyStyles.caption1,\n    fontWeight: tokens.fontWeightSemibold,\n    backgroundColor: tokens.colorNeutralBackground3,\n    color: tokens.colorNeutralForeground1,\n    ...shorthands.padding(tokens.spacingHorizontalS),\n    textAlign: 'left',\n    ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Window',\n      color: 'WindowText',\n    },\n  },\n  bodyCell: {\n    ...typographyStyles.caption1,\n    ...shorthands.padding(tokens.spacingHorizontalS),\n    ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),\n    color: tokens.colorNeutralForeground1,\n    textAlign: 'left',\n    '@media (forced-colors: active)': {\n      color: 'WindowText',\n    },\n  },\n});\n\n/**\n * Apply styling to the ChartTable slots based on the state\n */\nexport const useChartTableStyles = (props: ChartTableProps): ChartTableStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(chartTableClassNames.root, baseStyles.root /*props.styles?.root*/),\n    table: mergeClasses(chartTableClassNames.table, baseStyles.table /*props.styles?.table*/),\n    headerCell: mergeClasses(chartTableClassNames.headerCell, baseStyles.headerCell /*props.styles?.headerCell*/),\n    bodyCell: mergeClasses(chartTableClassNames.bodyCell, baseStyles.bodyCell /*props.styles?.bodyCell*/),\n    chart: mergeClasses(chartTableClassNames.chart /*props.styles?.chart*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","chartTableClassNames","root","table","headerCell","bodyCell","chart","useStyles","width","overflowX","borderCollapse","caption1","fontWeight","fontWeightSemibold","backgroundColor","colorNeutralBackground3","color","colorNeutralForeground1","padding","spacingHorizontalS","textAlign","border","strokeWidthThick","colorNeutralStroke2","useChartTableStyles","props","baseStyles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE;;CAEC,GACD,OAAO,MAAMC,uBAAyD;IACpEC,MAAM;IACNC,OAAO;IACPC,YAAY;IACZC,UAAU;IACVC,OAAO;AACT,EAAE;AAEF,MAAMC,YAAYX,WAAW;IAC3BM,MAAM;QACJM,OAAO;QACPC,WAAW;IACb;IACAN,OAAO;QACLO,gBAAgB;IAClB;IACAN,YAAY;QACV,GAAGJ,iBAAiBW,QAAQ;QAC5BC,YAAYb,OAAOc,kBAAkB;QACrCC,iBAAiBf,OAAOgB,uBAAuB;QAC/CC,OAAOjB,OAAOkB,uBAAuB;QACrC,GAAGnB,WAAWoB,OAAO,CAACnB,OAAOoB,kBAAkB,CAAC;QAChDC,WAAW;QACX,GAAGtB,WAAWuB,MAAM,CAACtB,OAAOuB,gBAAgB,EAAE,SAASvB,OAAOwB,mBAAmB,CAAC;QAClF,kCAAkC;YAChCT,iBAAiB;YACjBE,OAAO;QACT;IACF;IACAX,UAAU;QACR,GAAGL,iBAAiBW,QAAQ;QAC5B,GAAGb,WAAWoB,OAAO,CAACnB,OAAOoB,kBAAkB,CAAC;QAChD,GAAGrB,WAAWuB,MAAM,CAACtB,OAAOuB,gBAAgB,EAAE,SAASvB,OAAOwB,mBAAmB,CAAC;QAClFP,OAAOjB,OAAOkB,uBAAuB;QACrCG,WAAW;QACX,kCAAkC;YAChCJ,OAAO;QACT;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMQ,sBAAsB,CAACC;IAClC,MAAMC,aAAanB;IAEnB,OAAO;QACLL,MAAML,aAAaI,qBAAqBC,IAAI,EAAEwB,WAAWxB,IAAI,CAAC,oBAAoB;QAClFC,OAAON,aAAaI,qBAAqBE,KAAK,EAAEuB,WAAWvB,KAAK,CAAC,qBAAqB;QACtFC,YAAYP,aAAaI,qBAAqBG,UAAU,EAAEsB,WAAWtB,UAAU,CAAC,0BAA0B;QAC1GC,UAAUR,aAAaI,qBAAqBI,QAAQ,EAAEqB,WAAWrB,QAAQ,CAAC,wBAAwB;QAClGC,OAAOT,aAAaI,qBAAqBK,KAAK,CAAC,qBAAqB;IACtE;AACF,EAAE"}

package/lib/components/CommonComponents/CartesianChart.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useCartesianChartStyles } from './useCartesianChartStyles.styles';
 import { select as d3Select } from 'd3-selection';
-import { createNumericXAxis, createStringXAxis, createDateXAxis, XAxisTypes, YAxisType, createWrapOfXLabels, rotateXAxisLabels, calculateLongestLabelWidth, createYAxisLabels, ChartTypes, wrapContent, useRtl, truncateString, tooltipOfAxislabels, getSecureProps } from '../../utilities/index';
+import { createNumericXAxis, createStringXAxis, createDateXAxis, XAxisTypes, YAxisType, createWrapOfXLabels, rotateXAxisLabels, calculateLongestLabelWidth, createYAxisLabels, ChartTypes, wrapContent, useRtl, truncateString, tooltipOfAxislabels, getSecureProps, DEFAULT_WRAP_WIDTH } from '../../utilities/index';
 import { useId } from '@fluentui/react-utilities';
 import { SVGTooltipText } from '../../utilities/SVGTooltipText';
 import { ChartPopover } from './ChartPopover';
@@ -28,15 +28,20 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
     let _xScale;
     let isIntegralDataset = true;
     let _tooltipId = 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 = [
         ChartTypes.HorizontalBarChartWithAxis,
         ChartTypes.HeatMapChart,
+        ChartTypes.VerticalStackedBarChart,
         ChartTypes.GanttChart
     ];
     var _props_margins_top, _props_margins_bottom, _props_margins_left, _props_margins_right, _props_margins_right1, _props_margins_left1;
@@ -52,17 +57,34 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         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 = useCartesianChartStyles(props);
     const focusAttributes = useFocusableGroup();
@@ -75,8 +97,8 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         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 === YAxisType.StringAxis) {
+            const maxYAxisLabelLength = calculateMaxYAxisLabelLength(classes.yAxis);
             if (startFromX !== maxYAxisLabelLength) {
                 setStartFromX(maxYAxisLabelLength);
             }
@@ -98,8 +120,8 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
                 _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 === YAxisType.StringAxis) {
+            const maxYAxisLabelLength = calculateMaxYAxisLabelLength(classes.yAxis);
             if (startFromX !== maxYAxisLabelLength) {
                 setStartFromX(maxYAxisLabelLength);
             }
@@ -114,19 +136,6 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         props,
         prevProps
     ]);
-    React.useEffect(()=>{
-        if (!props.wrapXAxisLables && props.rotateXAxisLables && props.xAxisType === XAxisTypes.StringAxis) {
-            const rotateLabelProps = {
-                node: xAxisElement.current,
-                xAxis: _xScale
-            };
-            const rotatedHeight = rotateXAxisLabels(rotateLabelProps);
-            if (isRemoveValCalculated && removalValueForTextTuncate !== rotatedHeight + margins.bottom && rotatedHeight > 0) {
-                setRemovalValueForTextTuncate(rotatedHeight + margins.bottom);
-                setIsRemoveValCalculated(false);
-            }
-        }
-    });
     React.useImperativeHandle(props.componentRef, ()=>{
         var _chartContainer_current;
         return {
@@ -143,20 +152,14 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
     function _generateCallout(calloutProps) {
         return /*#__PURE__*/ React.createElement(ChartPopover, calloutProps);
     }
-    function calculateMaxYAxisLabelLength(chartType, // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    points, className) {
+    function calculateMaxYAxisLabelLength(className) {
         const formatTickLabel = (str)=>{
             if (props.showYAxisLablesTooltip) {
                 return truncateString(str, props.noOfCharsToTruncate || 4);
             }
             return str;
         };
-        if (chartType === ChartTypes.HeatMapChart) {
-            var _points__data, _points_;
-            return 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 calculateLongestLabelWidth(points === null || points === void 0 ? void 0 : points.map((point)=>formatTickLabel(`${point.y}`)), `.${className} text`);
-        }
+        return calculateLongestLabelWidth(props.stringDatasetForYAxisDomain.map((label)=>formatTickLabel(label)), `.${className} text`);
     }
     const { calloutProps, points, chartType, svgProps, culture, dateLocalizeOptions, timeFormatLocale, customDateTimeFormatter } = props;
     if (props.parentRef) {
@@ -165,7 +168,8 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
     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 {
@@ -182,7 +186,13 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         const XAxisParams = {
             domainNRangeValues: props.getDomainNRangeValues(points, props.getDomainMargins ? props.getDomainMargins(containerWidth) : margins, containerWidth, chartType, _useRtl, props.xAxisType, props.barwidth, props.tickValues, // This is only used for Horizontal Bar Chart with Axis for y as string axis
             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,
@@ -193,24 +203,8 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
             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.
@@ -235,25 +229,24 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         }
         _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 && 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
@@ -267,7 +260,7 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
             yAxisDomainValues: []
         };
         if (props.yAxisType && props.yAxisType === 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
@@ -280,7 +273,7 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
                 const YAxisParamsSecondary = {
                     margins: margins,
                     containerWidth: containerWidth,
-                    containerHeight: containerHeight - removalValueForTextTuncate,
+                    containerHeight: containerHeight - _removalValueForTextTuncate,
                     yAxisElement: yAxisElementSecondary.current,
                     yAxisTickFormat: props.yAxisTickFormat,
                     yAxisTickCount: props.yAxisTickCount,
@@ -294,7 +287,7 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
             }
             yScalePrimary = props.createYAxis(YAxisParams, _useRtl, axisData, isIntegralDataset, chartType, false, props.roundedTicks);
         }
-        if (chartTypesToCheck.includes(props.chartType)) {
+        if (chartTypesWithStringYAxis.includes(props.chartType) && props.yAxisType === 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)
@@ -327,7 +320,7 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         // 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
@@ -348,7 +341,7 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         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.
@@ -379,39 +372,88 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         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 ([
+            ChartTypes.GroupedVerticalBarChart,
+            ChartTypes.VerticalBarChart,
+            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 === XAxisTypes.StringAxis) {
-            const longestLabelWidth = 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 = 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 = 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 = calculateLongestLabelWidth(words, `.${classes.xAxis} text`);
-            labelWidth += Math.max(Math.ceil(longestLabelWidth), 10);
-        } else {
-            const longestLabelWidth = calculateLongestLabelWidth(_tickValues, `.${classes.xAxis} text`);
-            labelWidth += Math.ceil(longestLabelWidth);
+            return Math.max(Math.ceil(longestLabelWidth), DEFAULT_WRAP_WIDTH);
         }
-        let minChartWidth = margins.left + margins.right + labelWidth * (_tickValues.length - 1);
-        if ([
-            ChartTypes.GroupedVerticalBarChart,
-            ChartTypes.VerticalBarChart,
-            ChartTypes.VerticalStackedBarChart
-        ].includes(props.chartType)) {
-            const minDomainMargin = 8;
-            minChartWidth += minDomainMargin * 2;
+        // Default case
+        const longestLabelWidth = 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 === 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 = createWrapOfXLabels(wrapLabelProps)) !== null && _createWrapOfXLabels !== void 0 ? _createWrapOfXLabels : 0;
+        }
+        if (!props.wrapXAxisLables && props.rotateXAxisLables && props.xAxisType === XAxisTypes.StringAxis) {
+            const rotateLabelProps = {
+                node: xAxisElement.current,
+                xAxis: _xScale
+            };
+            var _rotateXAxisLabels;
+            const rotatedHeight = (_rotateXAxisLabels = 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
@@ -456,7 +498,7 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         },
         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, {
         content: props.xAxisTitle,
@@ -470,6 +512,19 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         wrapContent: wrapContent,
         showBackground: true,
         className: classes.svgTooltip
+    }), props.xAxisAnnotation !== undefined && props.xAxisAnnotation !== '' && /*#__PURE__*/ React.createElement(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: wrapContent,
+        showBackground: true,
+        className: classes.svgTooltip
     }), /*#__PURE__*/ React.createElement("g", {
         ref: (e)=>{
             yAxisElement.current = e;
@@ -487,7 +542,7 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
     }), props.secondaryYAxistitle !== undefined && props.secondaryYAxistitle !== '' && /*#__PURE__*/ React.createElement(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},
@@ -501,7 +556,7 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
     })), children, props.yAxisTitle !== undefined && props.yAxisTitle !== '' && /*#__PURE__*/ React.createElement(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,
@@ -512,6 +567,21 @@ import { useFocusableGroup, useArrowNavigationGroup } from '@fluentui/react-tabs
         wrapContent: wrapContent,
         showBackground: true,
         className: classes.svgTooltip
+    }), props.yAxisAnnotation !== undefined && props.yAxisAnnotation !== '' && (props.secondaryYAxistitle === undefined || props.secondaryYAxistitle === '') && /*#__PURE__*/ React.createElement(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: wrapContent,
+        showBackground: true,
+        className: classes.svgTooltip
     }))), !props.hideLegend && /*#__PURE__*/ React.createElement("div", {
         ref: (e)=>legendContainer = e,
         className: classes.legendContainer