feat(react-charting): enable wrapping of string x-axis labels in DeclarativeChart + hide overlapping labels based on post-transform width (microsoft#34666)

Author: krkshitij

change/@fluentui-react-charting-3c0c3199-d1a2-44b6-8a94-0f3baafd13ea.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: enable wrapping of string x-axis labels in DeclarativeChart + hide overlapping labels based on post-transform width",
+  "packageName": "@fluentui/react-charting",
+  "email": "kumarkshitij@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx

@@ -508,8 +508,10 @@ export const transformPlotlyJsonToVSBCProps = (
     });
   });
 
+  const vsbcData = Object.values(mapXToDataPoints);
+
   return {
-    data: Object.values(mapXToDataPoints),
+    data: vsbcData,
     width: input.layout?.width,
     height: input.layout?.height ?? 350,
     barWidth: 'auto',
@@ -525,6 +527,7 @@ export const transformPlotlyJsonToVSBCProps = (
     showYAxisLables: true,
     noOfCharsToTruncate: 20,
     showYAxisLablesTooltip: true,
+    wrapXAxisLables: typeof vsbcData[0]?.xAxisPoint === 'string',
     ...getTitles(input.layout),
     ...getAxisCategoryOrderProps(input.data, input.layout),
     ...getXAxisTickFormat(input.data[0], input.layout),
@@ -612,8 +615,10 @@ export const transformPlotlyJsonToGVBCProps = (
     });
   });
 
+  const gvbcData = Object.values(mapXToDataPoints);
+
   return {
-    data: Object.values(mapXToDataPoints),
+    data: gvbcData,
     width: input.layout?.width,
     height: input.layout?.height ?? 350,
     barwidth: 'auto',
@@ -622,6 +627,7 @@ export const transformPlotlyJsonToGVBCProps = (
     hideTickOverlap: true,
     hideLegend,
     roundCorners: true,
+    wrapXAxisLables: typeof gvbcData[0]?.name === 'string',
     ...getTitles(input.layout),
     ...getAxisCategoryOrderProps(input.data, input.layout),
     ...getYMinMaxValues(input.data[0], input.layout),
@@ -735,6 +741,7 @@ export const transformPlotlyJsonToVBCProps = (
     maxBarWidth: 50,
     hideLegend,
     roundCorners: true,
+    wrapXAxisLables: typeof vbcData[0]?.x === 'string',
     ...getTitles(input.layout),
     ...getAxisCategoryOrderProps(input.data, input.layout),
     ...getYMinMaxValues(input.data[0], input.layout),
@@ -1167,6 +1174,7 @@ export const transformPlotlyJsonToHeatmapProps = (
     hideTickOverlap: true,
     noOfCharsToTruncate: 20,
     showYAxisLablesTooltip: true,
+    wrapXAxisLables: true,
     ...getTitles(input.layout),
     ...getAxisCategoryOrderProps([firstData], input.layout),
   };
@@ -2101,6 +2109,7 @@ const getAxisCategoryOrderProps = (data: Data[], layout: Partial<Layout> | undef
     const isAxisTypeCategory =
       ax?.type === 'category' || (isStringArray(values) && !isNumberArray(values) && !isDateArray(values));
     if (!isAxisTypeCategory) {
+      result[propName] = 'data';
       return;
     }