@fluentui/react-charts 9.2.1 → 9.2.2

package/lib-commonjs/components/ChartTable/useChartTableStyles.styles.js

@@ -0,0 +1,196 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    chartTableClassNames: function() {
+        return chartTableClassNames;
+    },
+    useChartTableStyles: function() {
+        return useChartTableStyles;
+    }
+});
+const _react = require("@griffel/react");
+const chartTableClassNames = {
+    root: 'fui-ChartTable__root',
+    table: 'fui-ChartTable__table',
+    headerCell: 'fui-ChartTable__headerCell',
+    bodyCell: 'fui-ChartTable__bodyCell',
+    chart: 'fui-ChartTable__chart'
+};
+const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        a9b677: "fly5x3f",
+        B68tc82: "f1oy3dpc"
+    },
+    table: {
+        po53p8: "fgkb47j"
+    },
+    headerCell: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "fl43uef",
+        Bg96gwp: "fwrc4pm",
+        De3pzq: "f16xq7d1",
+        sj55zd: "f19n0e5",
+        z8tnut: "f17mpqex",
+        z189sj: [
+            "f1vdfbxk",
+            "f1f5gg8d"
+        ],
+        Byoj8tv: "fdvome7",
+        uwmqm3: [
+            "f1f5gg8d",
+            "f1vdfbxk"
+        ],
+        fsow6f: [
+            "f1o700av",
+            "fes3tcz"
+        ],
+        B4j52fo: "f18zi460",
+        Bekrc4i: [
+            "f1wpluaz",
+            "fsfsuhs"
+        ],
+        Bn0qgzm: "fmklw6v",
+        ibv6hh: [
+            "fsfsuhs",
+            "f1wpluaz"
+        ],
+        icvyot: "fzkkow9",
+        vrafjx: [
+            "fcdblym",
+            "fjik90z"
+        ],
+        oivjwe: "fg706s2",
+        wvpqe5: [
+            "fjik90z",
+            "fcdblym"
+        ],
+        g2u3we: "f68mrw8",
+        h3c5rm: [
+            "f7pw515",
+            "fw35ms5"
+        ],
+        B9xav0g: "frpde29",
+        zhjwy3: [
+            "fw35ms5",
+            "f7pw515"
+        ],
+        Bsw6fvg: "f8pusc0",
+        Bbusuzp: "fqgauei"
+    },
+    bodyCell: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fwrc4pm",
+        z8tnut: "f17mpqex",
+        z189sj: [
+            "f1vdfbxk",
+            "f1f5gg8d"
+        ],
+        Byoj8tv: "fdvome7",
+        uwmqm3: [
+            "f1f5gg8d",
+            "f1vdfbxk"
+        ],
+        B4j52fo: "f18zi460",
+        Bekrc4i: [
+            "f1wpluaz",
+            "fsfsuhs"
+        ],
+        Bn0qgzm: "fmklw6v",
+        ibv6hh: [
+            "fsfsuhs",
+            "f1wpluaz"
+        ],
+        icvyot: "fzkkow9",
+        vrafjx: [
+            "fcdblym",
+            "fjik90z"
+        ],
+        oivjwe: "fg706s2",
+        wvpqe5: [
+            "fjik90z",
+            "fcdblym"
+        ],
+        g2u3we: "f68mrw8",
+        h3c5rm: [
+            "f7pw515",
+            "fw35ms5"
+        ],
+        B9xav0g: "frpde29",
+        zhjwy3: [
+            "fw35ms5",
+            "f7pw515"
+        ],
+        sj55zd: "f19n0e5",
+        fsow6f: [
+            "f1o700av",
+            "fes3tcz"
+        ],
+        Bbusuzp: "fqgauei"
+    }
+}, {
+    d: [
+        ".fly5x3f{width:100%;}",
+        ".f1oy3dpc{overflow-x:auto;}",
+        ".fgkb47j{border-collapse:collapse;}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".fl43uef{font-weight:var(--fontWeightSemibold);}",
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}",
+        ".f16xq7d1{background-color:var(--colorNeutralBackground3);}",
+        ".f19n0e5{color:var(--colorNeutralForeground1);}",
+        ".f17mpqex{padding-top:var(--spacingHorizontalS);}",
+        ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
+        ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
+        ".fdvome7{padding-bottom:var(--spacingHorizontalS);}",
+        ".f1o700av{text-align:left;}",
+        ".fes3tcz{text-align:right;}",
+        ".f18zi460{border-top-width:var(--strokeWidthThick);}",
+        ".f1wpluaz{border-right-width:var(--strokeWidthThick);}",
+        ".fsfsuhs{border-left-width:var(--strokeWidthThick);}",
+        ".fmklw6v{border-bottom-width:var(--strokeWidthThick);}",
+        ".fzkkow9{border-top-style:solid;}",
+        ".fcdblym{border-right-style:solid;}",
+        ".fjik90z{border-left-style:solid;}",
+        ".fg706s2{border-bottom-style:solid;}",
+        ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}",
+        ".f7pw515{border-right-color:var(--colorNeutralStroke2);}",
+        ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}",
+        ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.f8pusc0{background-color:Window;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fqgauei{color:WindowText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ]
+});
+const useChartTableStyles = (props)=>{
+    const baseStyles = useStyles();
+    return {
+        root: (0, _react.mergeClasses)(chartTableClassNames.root, baseStyles.root /*props.styles?.root*/ ),
+        table: (0, _react.mergeClasses)(chartTableClassNames.table, baseStyles.table /*props.styles?.table*/ ),
+        headerCell: (0, _react.mergeClasses)(chartTableClassNames.headerCell, baseStyles.headerCell /*props.styles?.headerCell*/ ),
+        bodyCell: (0, _react.mergeClasses)(chartTableClassNames.bodyCell, baseStyles.bodyCell /*props.styles?.bodyCell*/ ),
+        chart: (0, _react.mergeClasses)(chartTableClassNames.chart /*props.styles?.chart*/ )
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"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"],"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"],"mappings":"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"}

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

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    chartTableClassNames: function() {
+        return chartTableClassNames;
+    },
+    useChartTableStyles: function() {
+        return useChartTableStyles;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const chartTableClassNames = {
+    root: 'fui-ChartTable__root',
+    table: 'fui-ChartTable__table',
+    headerCell: 'fui-ChartTable__headerCell',
+    bodyCell: 'fui-ChartTable__bodyCell',
+    chart: 'fui-ChartTable__chart'
+};
+const useStyles = (0, _react.makeStyles)({
+    root: {
+        width: '100%',
+        overflowX: 'auto'
+    },
+    table: {
+        borderCollapse: 'collapse'
+    },
+    headerCell: {
+        ..._reacttheme.typographyStyles.caption1,
+        fontWeight: _reacttheme.tokens.fontWeightSemibold,
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground3,
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        ..._react.shorthands.padding(_reacttheme.tokens.spacingHorizontalS),
+        textAlign: 'left',
+        ..._react.shorthands.border(_reacttheme.tokens.strokeWidthThick, 'solid', _reacttheme.tokens.colorNeutralStroke2),
+        '@media (forced-colors: active)': {
+            backgroundColor: 'Window',
+            color: 'WindowText'
+        }
+    },
+    bodyCell: {
+        ..._reacttheme.typographyStyles.caption1,
+        ..._react.shorthands.padding(_reacttheme.tokens.spacingHorizontalS),
+        ..._react.shorthands.border(_reacttheme.tokens.strokeWidthThick, 'solid', _reacttheme.tokens.colorNeutralStroke2),
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        textAlign: 'left',
+        '@media (forced-colors: active)': {
+            color: 'WindowText'
+        }
+    }
+});
+const useChartTableStyles = (props)=>{
+    const baseStyles = useStyles();
+    return {
+        root: (0, _react.mergeClasses)(chartTableClassNames.root, baseStyles.root /*props.styles?.root*/ ),
+        table: (0, _react.mergeClasses)(chartTableClassNames.table, baseStyles.table /*props.styles?.table*/ ),
+        headerCell: (0, _react.mergeClasses)(chartTableClassNames.headerCell, baseStyles.headerCell /*props.styles?.headerCell*/ ),
+        bodyCell: (0, _react.mergeClasses)(chartTableClassNames.bodyCell, baseStyles.bodyCell /*props.styles?.bodyCell*/ ),
+        chart: (0, _react.mergeClasses)(chartTableClassNames.chart /*props.styles?.chart*/ )
+    };
+};

package/lib-commonjs/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":";;;;;;;;;;;IAQaK,oBAAAA;;;IA4CAuB,mBAAAA;;;;uBApDwC,iBAAiB;4BAG7B,wBAAwB;AAK1D,6BAA+D;IACpEtB,MAAM;IACNC,OAAO;IACPC,YAAY;IACZC,UAAU;IACVC,OAAO;AACT,EAAE;AAEF,MAAMC,gBAAYX,iBAAAA,EAAW;IAC3BM,MAAM;QACJM,OAAO;QACPC,WAAW;IACb;IACAN,OAAO;QACLO,gBAAgB;IAClB;IACAN,YAAY;QACV,GAAGJ,4BAAAA,CAAiBW,QAAQ;QAC5BC,YAAYb,kBAAAA,CAAOc,kBAAkB;QACrCC,iBAAiBf,kBAAAA,CAAOgB,uBAAuB;QAC/CC,OAAOjB,kBAAAA,CAAOkB,uBAAuB;QACrC,GAAGnB,iBAAAA,CAAWoB,OAAO,CAACnB,kBAAAA,CAAOoB,kBAAkB,CAAC;QAChDC,WAAW;QACX,GAAGtB,iBAAAA,CAAWuB,MAAM,CAACtB,kBAAAA,CAAOuB,gBAAgB,EAAE,SAASvB,kBAAAA,CAAOwB,mBAAmB,CAAC;QAClF,kCAAkC;YAChCT,iBAAiB;YACjBE,OAAO;QACT;IACF;IACAX,UAAU;QACR,GAAGL,4BAAAA,CAAiBW,QAAQ;QAC5B,GAAGb,iBAAAA,CAAWoB,OAAO,CAACnB,kBAAAA,CAAOoB,kBAAkB,CAAC;QAChD,GAAGrB,iBAAAA,CAAWuB,MAAM,CAACtB,kBAAAA,CAAOuB,gBAAgB,EAAE,SAASvB,kBAAAA,CAAOwB,mBAAmB,CAAC;QAClFP,OAAOjB,kBAAAA,CAAOkB,uBAAuB;QACrCG,WAAW;QACX,kCAAkC;YAChCJ,OAAO;QACT;IACF;AACF;AAKO,4BAA4B,CAACS;IAClC,MAAMC,aAAanB;IAEnB,OAAO;QACLL,UAAML,mBAAAA,EAAaI,qBAAqBC,IAAI,EAAEwB,WAAWxB,IAAI,CAAC,oBAAoB;QAClFC,OAAON,uBAAAA,EAAaI,qBAAqBE,KAAK,EAAEuB,WAAWvB,KAAK,CAAC,qBAAqB;QACtFC,gBAAYP,mBAAAA,EAAaI,qBAAqBG,UAAU,EAAEsB,WAAWtB,UAAU,CAAC,0BAA0B;QAC1GC,cAAUR,mBAAAA,EAAaI,qBAAqBI,QAAQ,EAAEqB,WAAWrB,QAAQ,CAAC,wBAAwB;QAClGC,WAAOT,mBAAAA,EAAaI,qBAAqBK,KAAK,CAAC,qBAAqB;IACtE;AACF,EAAE"}

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

@@ -36,10 +36,14 @@ 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 = [
@@ -122,19 +126,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 {
@@ -188,7 +179,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 +196,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 +222,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
@@ -286,7 +266,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,
@@ -333,7 +313,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 +334,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 +365,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 +491,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,
@@ -493,7 +522,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 +536,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,