diff --git a/change/@fluentui-react-charting-e365c5ce-592e-422f-9329-1bee461a0dc3.json b/change/@fluentui-react-charting-e365c5ce-592e-422f-9329-1bee461a0dc3.json
new file mode 100644
index 00000000000000..375f7e74e92222
--- /dev/null
+++ b/change/@fluentui-react-charting-e365c5ce-592e-422f-9329-1bee461a0dc3.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix for bug 9136 and 7997 Fixing the issue of Going from stack callout to single callout and back to stack callout still shows the single callout. Also this consist of Fix for if the bar y value is same, the single callout does not move from the first instance where the callout was shown",
+  "packageName": "@fluentui/react-charting",
+  "email": "ankityadav@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
index b13c9fce252376..825e5b8da5eb54 100644
--- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
@@ -62,6 +62,11 @@ enum CircleVisbility {
   hide = 'hidden',
 }
 
+type CalloutAnchorPointData = {
+  xAxisDataPoint: string;
+  chartDataPoint: IVSChartDataPoint;
+};
+
 export interface IVerticalStackedBarChartState extends IBasestate {
   dataPointCalloutProps?: IVSChartDataPoint;
   stackCalloutProps?: IVerticalStackedChartProps;
@@ -87,7 +92,7 @@ export class VerticalStackedBarChartBase extends React.Component<
   private _lineObject: LineObject;
   private _tooltipId: string;
   private _yMax: number;
-  private _calloutAnchorPoint: IVSChartDataPoint | null;
+  private _calloutAnchorPoint: CalloutAnchorPointData | null;
   private _domainMargin: number;
   private _classNames: IProcessedStyleSet<IVerticalStackedBarChartStyles>;
   private _emptyChartId: string;
@@ -593,8 +598,11 @@ export class VerticalStackedBarChartBase extends React.Component<
     color: string,
     refSelected: React.MouseEvent<SVGElement> | SVGGElement,
   ): void {
-    if (this._calloutAnchorPoint !== point) {
-      this._calloutAnchorPoint = point;
+    if (this._calloutAnchorPoint?.chartDataPoint !== point || this._calloutAnchorPoint?.xAxisDataPoint !== xAxisPoint) {
+      this._calloutAnchorPoint = {
+        chartDataPoint: point,
+        xAxisDataPoint: xAxisPoint,
+      };
       this.setState({
         refSelected,
         /**
diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx
index 8d5ddcd722a095..ff16bd5467853b 100644
--- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx
+++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx
@@ -195,16 +195,18 @@ export class VerticalStackedBarChartStyledExample extends React.Component<{}, IV
               },
             }}
             // eslint-disable-next-line react/jsx-no-bind
-            onRenderCalloutPerDataPoint={props =>
-              props ? (
-                <ChartHoverCard
-                  XValue={props.xAxisCalloutData}
-                  Legend={props.legend}
-                  YValue={`${props.yAxisCalloutData || props.data} h`}
-                  color={props.color}
-                />
-              ) : null
-            }
+            {...(this.state.selectedCallout === 'singleCallout' && {
+              onRenderCalloutPerDataPoint: (props: IVSChartDataPoint) => {
+                return props ? (
+                  <ChartHoverCard
+                    XValue={props.xAxisCalloutData}
+                    Legend={props.legend}
+                    YValue={`${props.yAxisCalloutData || props.data} h`}
+                    color={props.color}
+                  />
+                ) : null;
+              },
+            })}
             svgProps={{
               'aria-label': 'Example chart with metadata per month',
             }}