diff --git a/change/@fluentui-react-charting-1216d12c-7b19-41b7-bbde-99ed3b330d78.json b/change/@fluentui-react-charting-1216d12c-7b19-41b7-bbde-99ed3b330d78.json
new file mode 100644
index 00000000000000..a5358d1785a622
--- /dev/null
+++ b/change/@fluentui-react-charting-1216d12c-7b19-41b7-bbde-99ed3b330d78.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix wrong narration when legend selected",
+  "packageName": "@fluentui/react-charting",
+  "email": "kumarkshitij@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
index 0e2e1a6b19f50b..d935277729521c 100644
--- a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
+++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
@@ -376,6 +376,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
             border: 0px;
           }
       data-is-focusable={true}
+      hidden={false}
       id="toolTipundefined"
       style={
         Object {
@@ -907,6 +908,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
             border: 0px;
           }
       data-is-focusable={true}
+      hidden={false}
       id="toolTipundefined"
       style={
         Object {
@@ -1335,6 +1337,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
             border: 0px;
           }
       data-is-focusable={true}
+      hidden={false}
       id="toolTipundefined"
       style={
         Object {
@@ -1725,6 +1728,9 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -2046,6 +2052,9 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -2228,6 +2237,9 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
       </g>
     </svg>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -2569,6 +2581,9 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -2910,6 +2925,9 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -3251,6 +3269,9 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -3592,5 +3613,8 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
index ef04080c0c4a36..cb47c0b1161094 100644
--- a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
+++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
@@ -318,25 +318,29 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
             {this.props.legendBars}
           </div>
         )}
-        {!this.props.hideTooltip && calloutProps!.isCalloutVisible && (
-          <Callout {...calloutProps}>
-            {/** Given custom callout, then it will render */}
-            {this.props.customizedCallout && this.props.customizedCallout}
-            {/** single x point its corresponding y points of all the bars/lines in chart will render in callout */}
-            {!this.props.customizedCallout && this.props.isCalloutForStack && this._multiValueCallout(calloutProps)}
-            {/** single x point its corresponding y point of single line/bar in the chart will render in callout */}
-            {!this.props.customizedCallout && !this.props.isCalloutForStack && (
-              <ChartHoverCard
-                XValue={calloutProps.XValue}
-                Legend={calloutProps.legend!}
-                YValue={calloutProps.YValue!}
-                color={calloutProps.color!}
-                culture={this.props.culture}
-                {...chartHoverProps}
-              />
-            )}
-          </Callout>
-        )}
+        {/** The callout is used for narration, so keep it mounted on the DOM */}
+        <Callout
+          hidden={!(!this.props.hideTooltip && calloutProps!.isCalloutVisible)}
+          /** Keep the callout updated with details of focused/hovered chart element */
+          shouldUpdateWhenHidden={true}
+          {...calloutProps}
+        >
+          {/** Given custom callout, then it will render */}
+          {this.props.customizedCallout && this.props.customizedCallout}
+          {/** single x point its corresponding y points of all the bars/lines in chart will render in callout */}
+          {!this.props.customizedCallout && this.props.isCalloutForStack && this._multiValueCallout(calloutProps)}
+          {/** single x point its corresponding y point of single line/bar in the chart will render in callout */}
+          {!this.props.customizedCallout && !this.props.isCalloutForStack && (
+            <ChartHoverCard
+              XValue={calloutProps.XValue}
+              Legend={calloutProps.legend!}
+              YValue={calloutProps.YValue!}
+              color={calloutProps.color!}
+              culture={this.props.culture}
+              {...chartHoverProps}
+            />
+          )}
+        </Callout>
       </div>
     );
   }
diff --git a/packages/react-charting/src/components/DonutChart/Arc/Arc.styles.ts b/packages/react-charting/src/components/DonutChart/Arc/Arc.styles.ts
index 6711f517b60340..ffd932bb78a698 100644
--- a/packages/react-charting/src/components/DonutChart/Arc/Arc.styles.ts
+++ b/packages/react-charting/src/components/DonutChart/Arc/Arc.styles.ts
@@ -18,6 +18,7 @@ export const getStyles = (props: IArcProps): IArcStyles => {
     focusRing: {
       stroke: theme.semanticColors.focusBorder,
       strokeWidth: 4,
+      fill: 'transparent',
     },
     insideDonutString: {
       fontSize: FontSizes.large,
diff --git a/packages/react-charting/src/components/DonutChart/Arc/Arc.tsx b/packages/react-charting/src/components/DonutChart/Arc/Arc.tsx
index 5e15cd26b7dc15..d267f9483dbf18 100644
--- a/packages/react-charting/src/components/DonutChart/Arc/Arc.tsx
+++ b/packages/react-charting/src/components/DonutChart/Arc/Arc.tsx
@@ -86,9 +86,7 @@ export class Arc extends React.Component<IArcProps, IArcState> {
 
   private _hoverOn(data: IChartDataPoint, mouseEvent: React.MouseEvent<SVGPathElement>): void {
     mouseEvent.persist();
-    if (this.props.activeArc === this.props.data!.data.legend || this.props.activeArc === '') {
-      this.props.hoverOnCallback!(data, mouseEvent);
-    }
+    this.props.hoverOnCallback!(data, mouseEvent);
   }
 
   private _hoverOff = (): void => {
diff --git a/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx b/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx
index e19ac9ea195c83..77834f31c56b1c 100644
--- a/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx
+++ b/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx
@@ -144,6 +144,8 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
           id={this._calloutId}
           onDismiss={this._closeCallout}
           preventDismissOnLostFocus={true}
+          /** Keep the callout updated with details of focused/hovered arc */
+          shouldUpdateWhenHidden={true}
           {...this.props.calloutProps!}
           {...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)}
         >
@@ -237,12 +239,11 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
   private _focusCallback = (data: IChartDataPoint, id: string, element: SVGPathElement): void => {
     this._currentHoverElement = element;
     this.setState({
-      showHover: true,
+      /** Show the callout if highlighted arc is focused and Hide it if unhighlighted arc is focused */
+      showHover: this.state.activeLegend === data.legend || this.state.activeLegend === '',
       value: data.data!.toString(),
       legend: data.legend,
-      activeLegend: data.legend,
       color: data.color!,
-      selectedLegend: data.legend!,
       xCalloutValue: data.xAxisCalloutData!,
       yCalloutValue: data.yAxisCalloutData!,
       focusedArcId: id,
@@ -256,25 +257,24 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
       this._calloutAnchorPoint = data;
       this._currentHoverElement = e;
       this.setState({
-        showHover: true,
+        /** Show the callout if highlighted arc is hovered and Hide it if unhighlighted arc is hovered */
+        showHover: this.state.activeLegend === data.legend || this.state.activeLegend === '',
         value: data.data!.toString(),
-        selectedLegend: data.legend!,
         legend: data.legend,
         color: data.color!,
         xCalloutValue: data.xAxisCalloutData!,
         yCalloutValue: data.yAxisCalloutData!,
-        activeLegend: data.legend,
         dataPointCalloutProps: data,
         callOutAccessibilityData: data.callOutAccessibilityData!,
       });
     }
   };
   private _onBlur = (): void => {
-    this.setState({ showHover: false, focusedArcId: '', activeLegend: '', selectedLegend: 'none' });
+    this.setState({ focusedArcId: '' });
   };
 
   private _hoverLeave(): void {
-    this.setState({ activeLegend: '', selectedLegend: 'none', focusedArcId: '' });
+    /**/
   }
 
   private _handleChartMouseLeave = () => {
diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
index 0ae06e0d48fee6..1e9cfcff7395bc 100644
--- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
+++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
@@ -106,7 +106,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={0.1}
+              opacity={1}
               role="text"
             />
             <text
@@ -364,7 +364,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
                   <button
                     aria-label="first selected"
                     aria-posinset={1}
-                    aria-selected={true}
+                    aria-selected={false}
                     aria-setsize={2}
                     className=
 
@@ -649,7 +649,7 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover
               onMouseLeave={[Function]}
               onMouseMove={[Function]}
               onMouseOver={[Function]}
-              opacity={0.1}
+              opacity={1}
               role="text"
             />
             <text
@@ -825,7 +825,7 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover
                   <button
                     aria-label="first selected"
                     aria-posinset={1}
-                    aria-selected={true}
+                    aria-selected={false}
                     aria-setsize={2}
                     className=
 
diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx
index 2750673ecff055..a864e6f914e16f 100644
--- a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx
+++ b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx
@@ -49,6 +49,7 @@ export interface IGroupedVerticalBarChartState extends IBasestate {
   titleForHoverCard: string;
   dataPointCalloutProps?: IGVBarChartSeriesPoint;
   callOutAccessibilityData?: IAccessibilityProps;
+  calloutLegend: string;
 }
 
 export class GroupedVerticalBarChartBase extends React.Component<
@@ -92,6 +93,7 @@ export class GroupedVerticalBarChartBase extends React.Component<
       yCalloutValue: '',
       YValueHover: [],
       hoverXValue: '',
+      calloutLegend: '',
     };
     warnDeprecations(COMPONENT_NAME, props, {
       showYAxisGridLines: 'Dont use this property. Lines are drawn by default',
@@ -130,7 +132,7 @@ export class GroupedVerticalBarChartBase extends React.Component<
       isBeakVisible: false,
       setInitialFocus: true,
       color: this.state.color,
-      Legend: this.state.titleForHoverCard,
+      Legend: this.state.calloutLegend,
       XValue: this.state.xCalloutValue,
       YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard,
       YValueHover: this.state.YValueHover,
@@ -227,16 +229,15 @@ export class GroupedVerticalBarChartBase extends React.Component<
     mouseEvent: React.MouseEvent<SVGElement>,
   ): void => {
     mouseEvent.persist();
-    if (
-      (this.state.isLegendSelected === false ||
-        (this.state.isLegendSelected && this.state.titleForHoverCard === pointData.legend)) &&
-      this._calloutAnchorPoint !== pointData
-    ) {
+    if (this._calloutAnchorPoint !== pointData) {
       this._calloutAnchorPoint = pointData;
       this.setState({
         refSelected: mouseEvent,
-        isCalloutVisible: true,
-        titleForHoverCard: pointData.legend,
+        /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */
+        isCalloutVisible:
+          this.state.isLegendSelected === false ||
+          (this.state.isLegendSelected === true && this.state.titleForHoverCard === pointData.legend),
+        calloutLegend: pointData.legend,
         dataForHoverCard: pointData.data,
         color: pointData.color,
         xCalloutValue: pointData.xAxisCalloutData,
@@ -266,30 +267,28 @@ export class GroupedVerticalBarChartBase extends React.Component<
     groupData: any,
     refArrayIndexNumber: number,
   ): void => {
-    if (
-      this.state.isLegendSelected === false ||
-      (this.state.isLegendSelected && this.state.titleForHoverCard === pointData.legend)
-    ) {
-      this._refArray.forEach((obj: IRefArrayData, index: number) => {
-        if (obj.index === pointData.legend && refArrayIndexNumber === index) {
-          this.setState({
-            refSelected: obj.refElement,
-            isCalloutVisible: true,
-            titleForHoverCard: pointData.legend,
-            dataForHoverCard: pointData.data,
-            color: pointData.color,
-            xCalloutValue: pointData.xAxisCalloutData,
-            yCalloutValue: pointData.yAxisCalloutData,
-            dataPointCalloutProps: pointData,
-            callOutAccessibilityData: this.props.isCalloutForStack
-              ? groupData.stackCallOutAccessibilityData
-              : pointData.callOutAccessibilityData,
-            YValueHover: groupData.groupSeries,
-            hoverXValue: pointData.xAxisCalloutData,
-          });
-        }
-      });
-    }
+    this._refArray.forEach((obj: IRefArrayData, index: number) => {
+      if (obj.index === pointData.legend && refArrayIndexNumber === index) {
+        this.setState({
+          refSelected: obj.refElement,
+          /** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */
+          isCalloutVisible:
+            this.state.isLegendSelected === false ||
+            (this.state.isLegendSelected === true && this.state.titleForHoverCard === pointData.legend),
+          calloutLegend: pointData.legend,
+          dataForHoverCard: pointData.data,
+          color: pointData.color,
+          xCalloutValue: pointData.xAxisCalloutData,
+          yCalloutValue: pointData.yAxisCalloutData,
+          dataPointCalloutProps: pointData,
+          callOutAccessibilityData: this.props.isCalloutForStack
+            ? groupData.stackCallOutAccessibilityData
+            : pointData.callOutAccessibilityData,
+          YValueHover: groupData.groupSeries,
+          hoverXValue: pointData.xAxisCalloutData,
+        });
+      }
+    });
   };
 
   private _redirectToUrl = (href: string | undefined): void => {
diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap
index fb4896075789d7..3f700f17197207 100644
--- a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap
@@ -618,6 +618,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
             border: 0px;
           }
       data-is-focusable={false}
+      hidden={false}
       id="toolTipcallout0"
       style={
         Object {
@@ -1365,6 +1366,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
             border: 0px;
           }
       data-is-focusable={false}
+      hidden={false}
       id="toolTipcallout0"
       style={
         Object {
@@ -1988,6 +1990,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -2545,6 +2550,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -2783,6 +2791,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
       </g>
     </svg>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -3360,6 +3371,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -3937,6 +3951,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -4514,6 +4531,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -5091,5 +5111,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
diff --git a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx
index 2cfb39e29e6a53..1de69743d1f6d1 100644
--- a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx
+++ b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx
@@ -257,7 +257,10 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
   private _onRectFocus = (id: string, data: FlattenData): void => {
     this.setState({
       target: this._rectRefArray[id].refElement,
-      isCalloutVisible: true,
+      /** Show the callout if highlighted rectangle is focused and Hide it if unhighlighted rectangle is focused */
+      isCalloutVisible:
+        this.state.isLegendSelected === false ||
+        (this.state.isLegendSelected === true && this.state.activeLegend === data.legend),
       calloutYValue: `${data.rectText}`,
       calloutTextColor: this._colorScale(data.value),
       calloutLegend: data.legend,
@@ -274,7 +277,10 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
       this._calloutAnchorPoint = data;
       this.setState({
         target: this._rectRefArray[id].refElement,
-        isCalloutVisible: true,
+        /** Show the callout if highlighted rectangle is hovered and Hide it if unhighlighted rectangle is hovered */
+        isCalloutVisible:
+          this.state.isLegendSelected === false ||
+          (this.state.isLegendSelected === true && this.state.activeLegend === data.legend),
         calloutYValue: `${data.rectText}`,
         calloutTextColor: this._colorScale(data.value),
         calloutLegend: data.legend,
diff --git a/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap b/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap
index c153cafa51b248..6c0b6359f16489 100644
--- a/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap
+++ b/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap
@@ -363,6 +363,7 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove
             border: 0px;
           }
       data-is-focusable={false}
+      hidden={false}
       id="10"
       style={
         Object {
@@ -873,6 +874,9 @@ exports[`HeatMapChart snapShot testing renders HeatMapChart correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -1290,6 +1294,9 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -1458,6 +1465,9 @@ exports[`HeatMapChart snapShot testing renders hideLegend correctly 1`] = `
       </g>
     </svg>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -1785,6 +1795,9 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -2112,5 +2125,8 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
diff --git a/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap b/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
index 51097312ff6659..db3e2e223ec4bf 100644
--- a/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
+++ b/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
@@ -1679,6 +1679,9 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -1988,6 +1991,9 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -2158,6 +2164,9 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
       </g>
     </svg>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -2487,6 +2496,9 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -2816,6 +2828,9 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -3145,6 +3160,9 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -3474,5 +3492,8 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
index 523d5f5d84d9c5..bb7799b141a448 100644
--- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
@@ -35,6 +35,7 @@ export interface IMultiStackedBarChartState {
   yCalloutValue?: string;
   dataPointCalloutProps?: IChartDataPoint;
   callOutAccessibilityData?: IAccessibilityProps;
+  calloutLegend: string;
 }
 
 export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarChartProps, IMultiStackedBarChartState> {
@@ -61,6 +62,7 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
       isLegendSelected: false,
       xCalloutValue: '',
       yCalloutValue: '',
+      calloutLegend: '',
     };
     this._onLeave = this._onLeave.bind(this);
     this._onBarLeave = this._onBarLeave.bind(this);
@@ -79,7 +81,7 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
       theme: theme!,
     });
 
-    const legendName = this.state.xCalloutValue ? this.state.xCalloutValue : this.state.selectedLegendTitle;
+    const legendName = this.state.xCalloutValue ? this.state.xCalloutValue : this.state.calloutLegend;
     const calloutYVal = this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard;
 
     const bars: JSX.Element[] = data!.map((singleChartData: IChartProps, index: number) => {
@@ -108,6 +110,8 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
           id={this._calloutId}
           onDismiss={this._closeCallout}
           preventDismissOnLostFocus={true}
+          /** Keep the callout updated with details of focused/hovered bar */
+          shouldUpdateWhenHidden={true}
           {...this.props.calloutProps!}
           {...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)}
         >
@@ -266,26 +270,24 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
   }
 
   private _onBarFocus(pointData: number, color: string, point: IChartDataPoint): void {
-    if (
-      this.state.isLegendSelected === false ||
-      (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend!)
-    ) {
-      this.state.refArray.forEach((obj: IRefArrayData) => {
-        if (obj.legendText === point.legend!) {
-          this.setState({
-            refSelected: obj.refElement,
-            isCalloutVisible: true,
-            selectedLegendTitle: point.legend!,
-            dataForHoverCard: pointData,
-            color: color,
-            xCalloutValue: point.xAxisCalloutData!,
-            yCalloutValue: point.yAxisCalloutData!,
-            dataPointCalloutProps: point,
-            callOutAccessibilityData: point.callOutAccessibilityData!,
-          });
-        }
-      });
-    }
+    this.state.refArray.forEach((obj: IRefArrayData) => {
+      if (obj.legendText === point.legend!) {
+        this.setState({
+          refSelected: obj.refElement,
+          /** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */
+          isCalloutVisible:
+            this.state.isLegendSelected === false ||
+            (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend!),
+          calloutLegend: point.legend!,
+          dataForHoverCard: pointData,
+          color: color,
+          xCalloutValue: point.xAxisCalloutData!,
+          yCalloutValue: point.yAxisCalloutData!,
+          dataPointCalloutProps: point,
+          callOutAccessibilityData: point.callOutAccessibilityData!,
+        });
+      }
+    });
   }
 
   private _refCallback(element: SVGGElement, legendTitle: string): void {
@@ -419,16 +421,15 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
   ): void {
     mouseEvent.persist();
 
-    if (
-      (this.state.isLegendSelected === false ||
-        (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend!)) &&
-      this._calloutAnchorPoint !== point
-    ) {
+    if (this._calloutAnchorPoint !== point) {
       this._calloutAnchorPoint = point;
       this.setState({
         refSelected: mouseEvent,
-        isCalloutVisible: true,
-        selectedLegendTitle: point.legend!,
+        /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */
+        isCalloutVisible:
+          this.state.isLegendSelected === false ||
+          (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend!),
+        calloutLegend: point.legend!,
         dataForHoverCard: pointData,
         color: color,
         xCalloutValue: point.xAxisCalloutData!,
diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
index a62c7db2f19c8b..62496b6fcb89d9 100644
--- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
@@ -22,6 +22,7 @@ export interface IStackedBarChartState {
   yCalloutValue?: string;
   dataPointCalloutProps?: IChartDataPoint;
   callOutAccessibilityData?: IAccessibilityProps;
+  calloutLegend: string;
 }
 
 export class StackedBarChartBase extends React.Component<IStackedBarChartProps, IStackedBarChartState> {
@@ -48,6 +49,7 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
       isLegendSelected: false,
       xCalloutValue: '',
       yCalloutValue: '',
+      calloutLegend: '',
     };
     this._refArray = [];
     this._onLeave = this._onLeave.bind(this);
@@ -146,6 +148,8 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
                 id={this._calloutId}
                 onDismiss={this._closeCallout}
                 preventDismissOnLostFocus={true}
+                /** Keep the callout updated with details of focused/hovered bar */
+                shouldUpdateWhenHidden={true}
                 {...this.props.calloutProps}
                 {...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)}
               >
@@ -154,7 +158,7 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
                     this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)
                   ) : (
                     <ChartHoverCard
-                      Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.selectedLegendTitle}
+                      Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.calloutLegend}
                       YValue={this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard}
                       color={this.state.color}
                       culture={culture}
@@ -317,26 +321,24 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
   }
 
   private _onBarFocus(pointData: number, color: string, point: IChartDataPoint): void {
-    if (
-      this.state.isLegendSelected === false ||
-      (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend!)
-    ) {
-      this._refArray.forEach((obj: IRefArrayData) => {
-        if (obj.index === point.legend!) {
-          this.setState({
-            refSelected: obj.refElement,
-            isCalloutVisible: true,
-            selectedLegendTitle: point.legend!,
-            dataForHoverCard: pointData,
-            color: color,
-            xCalloutValue: point.xAxisCalloutData!,
-            yCalloutValue: point.yAxisCalloutData!,
-            dataPointCalloutProps: point,
-            callOutAccessibilityData: point.callOutAccessibilityData!,
-          });
-        }
-      });
-    }
+    this._refArray.forEach((obj: IRefArrayData) => {
+      if (obj.index === point.legend!) {
+        this.setState({
+          refSelected: obj.refElement,
+          /** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */
+          isCalloutVisible:
+            this.state.isLegendSelected === false ||
+            (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend!),
+          calloutLegend: point.legend!,
+          dataForHoverCard: pointData,
+          color: color,
+          xCalloutValue: point.xAxisCalloutData!,
+          yCalloutValue: point.yAxisCalloutData!,
+          dataPointCalloutProps: point,
+          callOutAccessibilityData: point.callOutAccessibilityData!,
+        });
+      }
+    });
   }
 
   private _addLegend(legendDataItems: ILegend[], data?: IChartDataPoint): void {
@@ -409,16 +411,15 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
     mouseEvent: React.MouseEvent<SVGPathElement>,
   ): void {
     mouseEvent.persist();
-    if (
-      (this.state.isLegendSelected === false ||
-        (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend!)) &&
-      this._calloutAnchorPoint !== point
-    ) {
+    if (this._calloutAnchorPoint !== point) {
       this._calloutAnchorPoint = point;
       this.setState({
         refSelected: mouseEvent,
-        isCalloutVisible: true,
-        selectedLegendTitle: point.legend!,
+        /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */
+        isCalloutVisible:
+          this.state.isLegendSelected === false ||
+          (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend!),
+        calloutLegend: point.legend!,
         dataForHoverCard: pointData,
         color: color,
         xCalloutValue: point.xAxisCalloutData!,
diff --git a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
index 14d8ff291d987a..2e468266fc1ef3 100644
--- a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
+++ b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
@@ -49,6 +49,7 @@ export interface IVerticalBarChartState extends IBasestate {
   YValueHover: IYValueHover[];
   hoverXValue?: string | number | null;
   callOutAccessibilityData?: IAccessibilityProps;
+  calloutLegend: string;
 }
 
 type ColorScale = (_p?: number) => string;
@@ -85,6 +86,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
       activeXdataPoint: null,
       YValueHover: [],
       hoverXValue: '',
+      calloutLegend: '',
     };
     this._isHavingLine = this._checkForLine();
     this._calloutId = getId('callout');
@@ -120,7 +122,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
       }),
       gapSpace: 15,
       color: this.state.color,
-      legend: this.state.selectedLegendTitle,
+      legend: this.state.calloutLegend,
       XValue: this.state.xCalloutValue,
       YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard,
       onDismiss: this._closeCallout,
@@ -389,17 +391,16 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
     mouseEvent.persist();
 
     const { YValueHover, hoverXValue } = this._getCalloutContentForLineAndBar(point);
-    if (
-      (this.state.isLegendSelected === false ||
-        (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend)) &&
-      this._calloutAnchorPoint !== point
-    ) {
+    if (this._calloutAnchorPoint !== point) {
       this._calloutAnchorPoint = point;
       this.setState({
         refSelected: mouseEvent,
-        isCalloutVisible: true,
+        /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */
+        isCalloutVisible:
+          this.state.isLegendSelected === false ||
+          (this.state.isLegendSelected === true && this.state.selectedLegendTitle === point.legend),
         dataForHoverCard: point.y,
-        selectedLegendTitle: point.legend!,
+        calloutLegend: point.legend!,
         color: point.color || color,
         // To display callout value, if no callout value given, taking given point.x value as a string.
         xCalloutValue: point.xAxisCalloutData || point.x.toString(),
@@ -428,30 +429,28 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
   };
 
   private _onBarFocus = (point: IVerticalBarChartDataPoint, refArrayIndexNumber: number, color: string): void => {
-    if (
-      this.state.isLegendSelected === false ||
-      (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend)
-    ) {
-      const { YValueHover, hoverXValue } = this._getCalloutContentForLineAndBar(point);
-      this._refArray.forEach((obj: IRefArrayData, index: number) => {
-        if (obj.index === point.legend! && refArrayIndexNumber === index) {
-          this.setState({
-            refSelected: obj.refElement,
-            isCalloutVisible: true,
-            selectedLegendTitle: point.legend!,
-            dataForHoverCard: point.y,
-            color: point.color || color,
-            xCalloutValue: point.xAxisCalloutData || point.x.toString(),
-            yCalloutValue: point.yAxisCalloutData!,
-            dataPointCalloutProps: point,
-            activeXdataPoint: point.x,
-            YValueHover,
-            hoverXValue,
-            callOutAccessibilityData: point.callOutAccessibilityData,
-          });
-        }
-      });
-    }
+    const { YValueHover, hoverXValue } = this._getCalloutContentForLineAndBar(point);
+    this._refArray.forEach((obj: IRefArrayData, index: number) => {
+      if (obj.index === point.legend! && refArrayIndexNumber === index) {
+        this.setState({
+          refSelected: obj.refElement,
+          /** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */
+          isCalloutVisible:
+            this.state.isLegendSelected === false ||
+            (this.state.isLegendSelected === true && this.state.selectedLegendTitle === point.legend),
+          calloutLegend: point.legend!,
+          dataForHoverCard: point.y,
+          color: point.color || color,
+          xCalloutValue: point.xAxisCalloutData || point.x.toString(),
+          yCalloutValue: point.yAxisCalloutData!,
+          dataPointCalloutProps: point,
+          activeXdataPoint: point.x,
+          YValueHover,
+          hoverXValue,
+          callOutAccessibilityData: point.callOutAccessibilityData,
+        });
+      }
+    });
   };
 
   private _getScales = (
diff --git a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
index 282f183e2222d1..fbcb6c599ba9a4 100644
--- a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
@@ -519,6 +519,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             border: 0px;
           }
       data-is-focusable={true}
+      hidden={false}
       id="toolTipcallout0"
       style={
         Object {
@@ -1170,6 +1171,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
             border: 0px;
           }
       data-is-focusable={true}
+      hidden={false}
       id="toolTipcallout0"
       style={
         Object {
@@ -1664,6 +1666,9 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -2090,6 +2095,9 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -2197,6 +2205,9 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
       </g>
     </svg>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -2643,6 +2654,9 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -3089,6 +3103,9 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -3535,6 +3552,9 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -3981,5 +4001,8 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
index 988c1b6b6f3740..956f419a43ad71 100644
--- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
@@ -65,6 +65,7 @@ export interface IVerticalStackedBarChartState extends IBasestate {
   stackCalloutProps?: IVerticalStackedChartProps;
   activeXAxisDataPoint: number | string;
   callOutAccessibilityData?: IAccessibilityProps;
+  calloutLegend: string;
 }
 export class VerticalStackedBarChartBase extends React.Component<
   IVerticalStackedBarChartProps,
@@ -102,6 +103,7 @@ export class VerticalStackedBarChartBase extends React.Component<
       xCalloutValue: '',
       yCalloutValue: '',
       activeXAxisDataPoint: '',
+      calloutLegend: '',
     };
     warnDeprecations(COMPONENT_NAME, props, {
       colors: 'IVSChartDataPoint.color',
@@ -148,7 +150,7 @@ export class VerticalStackedBarChartBase extends React.Component<
       isBeakVisible: false,
       gapSpace: 15,
       color: this.state.color,
-      legend: this.state.selectedLegendTitle,
+      legend: this.state.calloutLegend,
       XValue: this.state.xCalloutValue!,
       YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard,
       YValueHover: this.state.YValueHover,
@@ -570,16 +572,18 @@ export class VerticalStackedBarChartBase extends React.Component<
     color: string,
     refSelected: React.MouseEvent<SVGElement> | SVGGElement,
   ): void {
-    if (
-      (this.state.isLegendSelected === false ||
-        (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend)) &&
-      this._calloutAnchorPoint !== point
-    ) {
+    if (this._calloutAnchorPoint !== point) {
       this._calloutAnchorPoint = point;
       this.setState({
         refSelected,
-        isCalloutVisible: true,
-        selectedLegendTitle: point.legend,
+        /**
+         * Show the callout if highlighted bar is focused/hovered
+         * and Hide it if unhighlighted bar is focused/hovered
+         */
+        isCalloutVisible:
+          this.state.isLegendSelected === false ||
+          (this.state.isLegendSelected === true && this.state.selectedLegendTitle === point.legend),
+        calloutLegend: point.legend,
         dataForHoverCard: point.data,
         color,
         xCalloutValue: point.xAxisCalloutData ? point.xAxisCalloutData : xAxisPoint,
diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
index 7ce6cf7d83a1d9..1a9532f03cbfd8 100644
--- a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
@@ -472,6 +472,7 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
             border: 0px;
           }
       data-is-focusable={true}
+      hidden={false}
       id="toolTipcallout0"
       style={
         Object {
@@ -1076,6 +1077,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
             border: 0px;
           }
       data-is-focusable={true}
+      hidden={false}
       id="toolTipcallout0"
       style={
         Object {
@@ -1712,6 +1714,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
             border: 0px;
           }
       data-is-focusable={true}
+      hidden={false}
       id="toolTipcallout0"
       style={
         Object {
@@ -2133,6 +2136,9 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -2466,6 +2472,9 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -2570,6 +2579,9 @@ exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1
       <g />
     </svg>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -2923,6 +2935,9 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -3276,6 +3291,9 @@ exports[`VerticalStackedBarChart snapShot testing renders isCalloutForStack corr
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -3629,6 +3647,9 @@ exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -3982,6 +4003,9 @@ exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correc
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -4335,5 +4359,8 @@ exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correc
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;