diff --git a/change/@uifabric-charting-1027db92-a05d-490c-bb5c-874afb13b7d9.json b/change/@uifabric-charting-1027db92-a05d-490c-bb5c-874afb13b7d9.json
new file mode 100644
index 0000000000000..8b9f961e019c2
--- /dev/null
+++ b/change/@uifabric-charting-1027db92-a05d-490c-bb5c-874afb13b7d9.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix wrong narration when legend selected",
+  "packageName": "@uifabric/charting",
+  "email": "kumarkshitij@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/charting/src/components/AreaChart/AreaChart.base.tsx b/packages/charting/src/components/AreaChart/AreaChart.base.tsx
index 092be4695872f..75c57d9b238dc 100644
--- a/packages/charting/src/components/AreaChart/AreaChart.base.tsx
+++ b/packages/charting/src/components/AreaChart/AreaChart.base.tsx
@@ -481,6 +481,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
           this._onLegendClick(singleChartData.legend);
         },
         hoverAction: () => {
+          this._handleChartMouseLeave();
           this._onLegendHover(singleChartData.legend);
         },
         onMouseOutAction: (isLegendSelected?: boolean) => {
diff --git a/packages/charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap b/packages/charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
index 4d3db5d356eba..c872dcbfe056b 100644
--- a/packages/charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
+++ b/packages/charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
@@ -345,6 +345,9 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -673,6 +676,9 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -855,6 +861,9 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
       </g>
     </svg>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -1203,6 +1212,9 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -1551,6 +1563,9 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -1899,6 +1914,9 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -2247,5 +2265,8 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
diff --git a/packages/charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/charting/src/components/CommonComponents/CartesianChart.base.tsx
index 2d2039dd7e3b3..410fb8fd4ffef 100644
--- a/packages/charting/src/components/CommonComponents/CartesianChart.base.tsx
+++ b/packages/charting/src/components/CommonComponents/CartesianChart.base.tsx
@@ -281,25 +281,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/charting/src/components/DonutChart/Arc/Arc.styles.ts b/packages/charting/src/components/DonutChart/Arc/Arc.styles.ts
index 94d13fc25f61a..c504dd881b479 100644
--- a/packages/charting/src/components/DonutChart/Arc/Arc.styles.ts
+++ b/packages/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/charting/src/components/DonutChart/Arc/Arc.tsx b/packages/charting/src/components/DonutChart/Arc/Arc.tsx
index 566b4de01930f..c551b7db2f29b 100644
--- a/packages/charting/src/components/DonutChart/Arc/Arc.tsx
+++ b/packages/charting/src/components/DonutChart/Arc/Arc.tsx
@@ -71,9 +71,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/charting/src/components/DonutChart/DonutChart.base.tsx b/packages/charting/src/components/DonutChart/DonutChart.base.tsx
index 05ca5080fd798..c73a4ebf98f78 100644
--- a/packages/charting/src/components/DonutChart/DonutChart.base.tsx
+++ b/packages/charting/src/components/DonutChart/DonutChart.base.tsx
@@ -145,6 +145,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)}
         >
@@ -206,6 +208,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
             }
           },
           hoverAction: () => {
+            this._handleChartMouseLeave();
             if (this.state.activeLegend !== point.legend || this.state.activeLegend === '') {
               this.setState({ activeLegend: point.legend! });
             } else {
@@ -238,12 +241,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,
@@ -257,25 +259,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/charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx b/packages/charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx
index cfe963979ac6d..926979df32c9f 100644
--- a/packages/charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx
+++ b/packages/charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx
@@ -55,6 +55,7 @@ export interface IGroupedVerticalBarChartState extends IBasestate {
   titleForHoverCard: string;
   dataPointCalloutProps?: IGVBarChartSeriesPoint;
   callOutAccessibilityData?: IAccessibilityProps;
+  calloutLegend: string;
 }
 
 export class GroupedVerticalBarChartBase extends React.Component<
@@ -98,6 +99,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',
@@ -136,7 +138,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,
@@ -233,16 +235,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,
@@ -272,30 +273,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 => {
@@ -507,6 +506,7 @@ export class GroupedVerticalBarChartBase extends React.Component<
             this._onLegendClick(point.legend);
           },
           hoverAction: () => {
+            this._handleChartMouseLeave();
             this._onLegendHover(point.legend);
           },
           onMouseOutAction: (isLegendSelected?: boolean) => {
diff --git a/packages/charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap b/packages/charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap
index 1e284db788889..f744c6ba35e4b 100644
--- a/packages/charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap
+++ b/packages/charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap
@@ -579,6 +579,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -1141,6 +1144,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -1379,6 +1385,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
       </g>
     </svg>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -1961,6 +1970,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -2543,6 +2555,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -3125,6 +3140,9 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -3707,5 +3725,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
diff --git a/packages/charting/src/components/HeatMapChart/HeatMapChart.base.tsx b/packages/charting/src/components/HeatMapChart/HeatMapChart.base.tsx
index ff28b7cb85256..19a9cc6e5b3bd 100644
--- a/packages/charting/src/components/HeatMapChart/HeatMapChart.base.tsx
+++ b/packages/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,
@@ -430,6 +436,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
           this._onLegendClick(item.legend);
         },
         hoverAction: () => {
+          this._handleChartMouseLeave();
           this._onLegendHover(item.legend);
         },
         onMouseOutAction: (isLegendSelected?: boolean) => {
diff --git a/packages/charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap b/packages/charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap
index c000a44086864..af902c5799cfb 100644
--- a/packages/charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap
+++ b/packages/charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap
@@ -331,6 +331,9 @@ exports[`HeatMapChart snapShot testing renders HeatMapChart correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -754,6 +757,9 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -922,6 +928,9 @@ exports[`HeatMapChart snapShot testing renders hideLegend correctly 1`] = `
       </g>
     </svg>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -1256,6 +1265,9 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -1590,5 +1602,8 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
diff --git a/packages/charting/src/components/LineChart/LineChart.base.tsx b/packages/charting/src/components/LineChart/LineChart.base.tsx
index e7cbb6ac53a58..05d091cf18b99 100644
--- a/packages/charting/src/components/LineChart/LineChart.base.tsx
+++ b/packages/charting/src/components/LineChart/LineChart.base.tsx
@@ -361,6 +361,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
           this.setState({ activeLegend: '' });
         },
         hoverAction: () => {
+          this._handleChartMouseLeave();
           this.setState({ activeLegend: point.legend });
         },
         ...(point.legendShape && {
@@ -390,6 +391,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
               this.setState({ activeLegend: '' });
             },
             hoverAction: () => {
+              this._handleChartMouseLeave();
               this.setState({ activeLegend: title });
             },
             opacity: this._colorFillBarsOpacity,
diff --git a/packages/charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap b/packages/charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
index 32d15b22294c6..74a9d5f1cb303 100644
--- a/packages/charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
+++ b/packages/charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
@@ -333,6 +333,9 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -649,6 +652,9 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -819,6 +825,9 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
       </g>
     </svg>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -1155,6 +1164,9 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -1491,6 +1503,9 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -1827,6 +1842,9 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -2163,5 +2181,8 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
diff --git a/packages/charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
index e228e46749636..20bfc9d6031db 100644
--- a/packages/charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
+++ b/packages/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)}
         >
@@ -247,26 +251,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 {
@@ -316,6 +318,7 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
                 this._onClick(point.legend!);
               },
               hoverAction: () => {
+                this._handleChartMouseLeave();
                 this._onHover(point.legend!);
               },
               onMouseOutAction: (isLegendSelected?: boolean) => {
@@ -341,6 +344,7 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
               this._onClick(point.legend!);
             },
             hoverAction: () => {
+              this._handleChartMouseLeave();
               this._onHover(point.legend!);
             },
             onMouseOutAction: (isLegendSelected?: boolean) => {
@@ -400,16 +404,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/charting/src/components/StackedBarChart/StackedBarChart.base.tsx b/packages/charting/src/components/StackedBarChart/StackedBarChart.base.tsx
index fe9b1593406cc..4f75ca4fdffe6 100644
--- a/packages/charting/src/components/StackedBarChart/StackedBarChart.base.tsx
+++ b/packages/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,7 +148,9 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
                 id={this._calloutId}
                 onDismiss={this._closeCallout}
                 preventDismissOnLostFocus={true}
-                {...this.props.calloutProps!}
+                /** 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}
@@ -214,6 +218,7 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
         hoverAction:
           total > 0
             ? () => {
+                this._handleChartMouseLeave();
                 this._onHover(point.legend!);
               }
             : undefined,
@@ -303,26 +308,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 {
@@ -395,16 +398,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/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
index 16cf70bab4ece..83baf2714c7ea 100644
--- a/packages/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
+++ b/packages/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
@@ -45,10 +45,11 @@ export interface IVerticalBarChartState extends IBasestate {
   /**
    * data point of x, where rectangle is hovered or focused
    */
-  acitveXdataPoint: number | string | null;
+  activeXdataPoint: number | string | null;
   YValueHover: IYValueHover[];
   hoverXValue?: string | number | null;
   callOutAccessibilityData?: IAccessibilityProps;
+  calloutLegend: string;
 }
 
 type ColorScale = (_p?: number) => string;
@@ -82,9 +83,10 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
       selectedLegendTitle: '',
       xCalloutValue: '',
       yCalloutValue: '',
-      acitveXdataPoint: null,
+      activeXdataPoint: null,
       YValueHover: [],
       hoverXValue: '',
+      calloutLegend: '',
     };
     this._isHavingLine = this._checkForLine();
     this._calloutId = getId('callout');
@@ -117,7 +119,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,
@@ -215,7 +217,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
             stroke={lineLegendColor}
             fill={this.props.theme!.palette.white}
             strokeWidth={3}
-            visibility={this.state.acitveXdataPoint === item.x ? CircleVisbility.show : CircleVisbility.hide}
+            visibility={this.state.activeXdataPoint === item.x ? CircleVisbility.show : CircleVisbility.hide}
             onClick={item.point.lineData?.onClick}
           />
         );
@@ -369,23 +371,22 @@ 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(),
         yCalloutValue: point.yAxisCalloutData!,
         dataPointCalloutProps: point,
-        acitveXdataPoint: point.x,
+        activeXdataPoint: point.x,
         YValueHover,
         hoverXValue,
         callOutAccessibilityData: point.callOutAccessibilityData,
@@ -401,37 +402,35 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
     this._calloutAnchorPoint = null;
     this.setState({
       isCalloutVisible: false,
-      acitveXdataPoint: null,
+      activeXdataPoint: null,
       YValueHover: [],
       hoverXValue: '',
     });
   };
 
   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,
-            acitveXdataPoint: 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 = (
@@ -648,6 +647,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
           this._onLegendClick(point.legend!);
         },
         hoverAction: () => {
+          this._handleChartMouseLeave();
           this._onLegendHover(point.legend!);
         },
         onMouseOutAction: (isLegendSelected?: boolean) => {
@@ -664,6 +664,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
           this._onLegendClick(lineLegendText);
         },
         hoverAction: () => {
+          this._handleChartMouseLeave();
           this._onLegendHover(lineLegendText);
         },
         onMouseOutAction: (isLegendSelected?: boolean) => {
diff --git a/packages/charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap b/packages/charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
index a94728b0f5247..d9762ce8ce3f0 100644
--- a/packages/charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
+++ b/packages/charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
@@ -448,6 +448,9 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -879,6 +882,9 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -986,6 +992,9 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
       </g>
     </svg>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -1437,6 +1446,9 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -1888,6 +1900,9 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -2339,6 +2354,9 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -2790,5 +2808,8 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
diff --git a/packages/charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
index c583a1350258a..c28aa1fa9f381 100644
--- a/packages/charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
+++ b/packages/charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
@@ -70,6 +70,7 @@ export interface IVerticalStackedBarChartState extends IBasestate {
   stackCalloutProps?: IVerticalStackedChartProps;
   activeXAxisDataPoint: number | string;
   callOutAccessibilityData?: IAccessibilityProps;
+  calloutLegend: string;
 }
 export class VerticalStackedBarChartBase extends React.Component<
   IVerticalStackedBarChartProps,
@@ -107,6 +108,7 @@ export class VerticalStackedBarChartBase extends React.Component<
       xCalloutValue: '',
       yCalloutValue: '',
       activeXAxisDataPoint: '',
+      calloutLegend: '',
     };
     warnDeprecations(COMPONENT_NAME, props, {
       colors: 'IVSChartDataPoint.color',
@@ -153,7 +155,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,
@@ -499,7 +501,12 @@ export class VerticalStackedBarChartBase extends React.Component<
           action: () => {
             this._onLegendClick(point.legend);
           },
-          hoverAction: allowHoverOnLegend ? () => this._onLegendHover(point.legend) : undefined,
+          hoverAction: allowHoverOnLegend
+            ? () => {
+                this._handleChartMouseLeave();
+                this._onLegendHover(point.legend);
+              }
+            : undefined,
           onMouseOutAction: allowHoverOnLegend ? isLegendSelected => this._onLegendLeave(isLegendSelected) : undefined,
         };
 
@@ -516,7 +523,12 @@ export class VerticalStackedBarChartBase extends React.Component<
           action: () => {
             this._onLegendClick(point.title);
           },
-          hoverAction: allowHoverOnLegend ? () => this._onLegendHover(point.title) : undefined,
+          hoverAction: allowHoverOnLegend
+            ? () => {
+                this._handleChartMouseLeave();
+                this._onLegendHover(point.title);
+              }
+            : undefined,
           onMouseOutAction: allowHoverOnLegend ? isLegendSelected => this._onLegendLeave(isLegendSelected) : undefined,
         };
         legendsOfLine.push(legend);
@@ -551,16 +563,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/charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap b/packages/charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
index 033c6af759fd2..f5ce900563360 100644
--- a/packages/charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
+++ b/packages/charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
@@ -356,6 +356,9 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -695,6 +698,9 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -799,6 +805,9 @@ exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1
       <g />
     </svg>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -1158,6 +1167,9 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -1517,6 +1529,9 @@ exports[`VerticalStackedBarChart snapShot testing renders isCalloutForStack corr
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -1876,6 +1891,9 @@ exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -2235,6 +2253,9 @@ exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correc
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;
 
@@ -2594,5 +2615,8 @@ exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correc
       </div>
     </div>
   </div>
+  <span
+    className="ms-layer"
+  />
 </div>
 `;