fix(react-charts): fix heatmap y-axis labels and vertical bar chart bar size (microsoft#35181)

Co-authored-by: Anush <[email protected]>

Author: Anush2303

change/@fluentui-react-charts-143cf22f-ab08-4bb7-b3ab-3cd1306e1dc7.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix v9 chart bugs",
+  "packageName": "@fluentui/react-charts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx

@@ -71,7 +71,12 @@ interface GVSingleDataPoint {
 export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = React.forwardRef<
   HTMLDivElement,
   GroupedVerticalBarChartProps
->((props = { maxBarWidth: 24, xAxisCategoryOrder: 'default' }, forwardedRef) => {
+>((_props, forwardedRef) => {
+  const props: GroupedVerticalBarChartProps = {
+    xAxisCategoryOrder: 'default',
+    maxBarWidth: 24,
+    ..._props,
+  };
   const _tooltipId: string = useId('GVBCTooltipId_');
   const _emptyChartId: string = useId('_GVBC_empty');
   const _useRtl: boolean = useRtl();

packages/charts/react-charts/library/src/components/HeatMapChart/HeatMapChart.tsx

@@ -120,7 +120,7 @@ export const HeatMapChart: React.FunctionComponent<HeatMapChartProps> = React.fo
       if (xAxisType === XAxisTypes.NumericAxis || xAxisType === XAxisTypes.DateAxis) {
         domainNRangeValue = { dStartValue: 0, dEndValue: 0, rStartValue: 0, rEndValue: 0 };
       } else {
-        domainNRangeValue = domainRangeOfXStringAxis(margins, width, isRTL);
+        domainNRangeValue = domainRangeOfXStringAxis(_margins.current, width, isRTL);
       }
       return domainNRangeValue;
     }

packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.tsx

@@ -74,7 +74,12 @@ const MIN_DOMAIN_MARGIN = 8;
 export const VerticalBarChart: React.FunctionComponent<VerticalBarChartProps> = React.forwardRef<
   HTMLDivElement,
   VerticalBarChartProps
->((props = { xAxisCategoryOrder: 'default' }, forwardedRef) => {
+>((_props, forwardedRef) => {
+  const props: VerticalBarChartProps = {
+    xAxisCategoryOrder: 'default',
+    maxBarWidth: 24,
+    ..._props,
+  };
   let _points: VerticalBarChartDataPoint[] = [];
   let _barWidth: number = 0;
   let _colors: string[];