fix(react-charts): fix donut and gauge chart title issue (#35646)

Co-authored-by: Anush <anushgupta@microsoft.com>

Author: Anush2303

change/@fluentui-react-charts-d3b6b587-98e3-4d48-a11e-821504bc4497.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix chart title bugs",
+  "packageName": "@fluentui/react-charts",
+  "email": "anushgupta@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charts/library/etc/react-charts.api.md

@@ -952,6 +952,7 @@ export interface GaugeChartStyles {
     segment?: string;
     shapeStyles?: string;
     sublabel?: string;
+    svgTooltip?: string;
 }
 
 // @public (undocumented)

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

@@ -348,24 +348,26 @@ export const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwar
                 tooltipClassName={classes.svgTooltip}
               />
             )}
-            <Pie
-              width={_width!}
-              height={_height!}
-              outerRadius={outerRadius}
-              innerRadius={props.innerRadius!}
-              data={chartData!}
-              onFocusCallback={_focusCallback}
-              hoverOnCallback={_hoverCallback}
-              hoverLeaveCallback={_hoverLeave}
-              uniqText={_uniqText}
-              onBlurCallback={_onBlur}
-              activeArc={_getHighlightedLegend()}
-              focusedArcId={focusedArcId || ''}
-              href={props.href!}
-              valueInsideDonut={_toLocaleString(valueInsideDonut)}
-              showLabelsInPercent={props.showLabelsInPercent}
-              hideLabels={props.hideLabels}
-            />
+            <g transform={`translate(0, ${titleHeight})`}>
+              <Pie
+                width={_width!}
+                height={_height!}
+                outerRadius={outerRadius}
+                innerRadius={props.innerRadius!}
+                data={chartData!}
+                onFocusCallback={_focusCallback}
+                hoverOnCallback={_hoverCallback}
+                hoverLeaveCallback={_hoverLeave}
+                uniqText={_uniqText}
+                onBlurCallback={_onBlur}
+                activeArc={_getHighlightedLegend()}
+                focusedArcId={focusedArcId || ''}
+                href={props.href!}
+                valueInsideDonut={_toLocaleString(valueInsideDonut)}
+                showLabelsInPercent={props.showLabelsInPercent}
+                hideLabels={props.hideLabels}
+              />
+            </g>
           </svg>
         </div>
         <ChartPopover