diff --git a/change/@fluentui-react-charting-beea75ce-fc3b-4589-8902-28d31ef030fa.json b/change/@fluentui-react-charting-beea75ce-fc3b-4589-8902-28d31ef030fa.json
new file mode 100644
index 00000000000000..77a2c534856186
--- /dev/null
+++ b/change/@fluentui-react-charting-beea75ce-fc3b-4589-8902-28d31ef030fa.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix chart title overflow",
+  "packageName": "@fluentui/react-charting",
+  "email": "kumarkshitij@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
index 4054279ee4d05a..068b07776febda 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
+++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
@@ -13,6 +13,7 @@ import {
 import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
 import { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';
 import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
+import { TooltipHost, TooltipOverflowMode } from '@fluentui/react';
 
 const getClassNames = classNamesFunction<IHorizontalBarChartStyleProps, IHorizontalBarChartStyles>();
 
@@ -88,12 +89,15 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
                 <FocusZone direction={FocusZoneDirection.horizontal}>
                   <div className={this._classNames.chartTitle}>
                     {points!.chartTitle && (
-                      <div
-                        className={this._classNames.chartDataText}
-                        {...getAccessibleDataObject(points!.chartTitleAccessibilityData)}
+                      <TooltipHost
+                        overflowMode={TooltipOverflowMode.Self}
+                        hostClassName={this._classNames.chartTitleLeft}
+                        content={points!.chartTitle}
                       >
-                        {points!.chartTitle}
-                      </div>
+                        <span {...getAccessibleDataObject(points!.chartTitleAccessibilityData)}>
+                          {points!.chartTitle}
+                        </span>
+                      </TooltipHost>
                     )}
                     {chartDataText}
                   </div>
@@ -228,21 +232,21 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
     switch (chartDataMode) {
       case 'default':
         return (
-          <div className={this._classNames.chartDataText} {...accessibilityData}>
+          <div className={this._classNames.chartTitleRight} {...accessibilityData}>
             {convertToLocaleString(x, culture)}
           </div>
         );
       case 'fraction':
         return (
           <div {...accessibilityData}>
-            <span className={this._classNames.chartDataText}>{convertToLocaleString(x, culture)}</span>
+            <span className={this._classNames.chartTitleRight}>{convertToLocaleString(x, culture)}</span>
             <span className={this._classNames.chartDataTextDenominator}>{'/' + convertToLocaleString(y, culture)}</span>
           </div>
         );
       case 'percentage':
         const dataRatioPercentage = `${convertToLocaleString(Math.round((x / y) * 100), culture)}%`;
         return (
-          <div className={this._classNames.chartDataText} {...accessibilityData}>
+          <div className={this._classNames.chartTitleRight} {...accessibilityData}>
             {dataRatioPercentage}
           </div>
         );
diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
index 47a22f4807b440..d1040736c4a67e 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
+++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.styles.ts
@@ -34,7 +34,14 @@ export const getHorizontalBarChartStyles = (props: IHorizontalBarChartStyleProps
       justifyContent: 'space-between',
       marginBottom: '3px',
     },
-    chartDataText: {
+    chartTitleLeft: {
+      fontWeight: FontWeights.bold,
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      display: 'block',
+    },
+    chartTitleRight: {
       fontWeight: FontWeights.bold,
     },
     chartDataTextDenominator: {
diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.types.ts b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.types.ts
index 4ab5dbbeba4b00..9b3be300cf220b 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.types.ts
+++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.types.ts
@@ -132,9 +132,14 @@ export interface IHorizontalBarChartStyles {
   barWrapper: IStyle;
 
   /**
-   * Style for the chart data text.
+   * Style for left side text of the chart title
    */
-  chartDataText: IStyle;
+  chartTitleLeft: IStyle;
+
+  /**
+   * Style for right side text of the chart title
+   */
+  chartTitleRight: IStyle;
 
   /**
    * Style for the chart data text denominator.
diff --git a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
index cef795548d3569..a5bf5bd1bb384d 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
@@ -57,14 +57,45 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
         >
           <div
             className=
-
+                ms-TooltipHost
                 {
+                  display: block;
                   font-weight: 700;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
                 }
-            data-is-focusable={true}
-            role="text"
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            role="none"
           >
-            one
+            <span
+              data-is-focusable={true}
+              role="text"
+            >
+              one
+            </span>
+            <div
+              hidden={true}
+              id="tooltip2"
+              style={
+                Object {
+                  "border": 0,
+                  "height": 1,
+                  "margin": -1,
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "absolute",
+                  "whiteSpace": "nowrap",
+                  "width": 1,
+                }
+              }
+            >
+              one
+            </div>
           </div>
           <div
             className=
@@ -85,7 +116,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone2"
+        data-focuszone-id="FocusZone3"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -171,7 +202,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone3"
+        data-focuszone-id="FocusZone4"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -192,14 +223,45 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
         >
           <div
             className=
-
+                ms-TooltipHost
                 {
+                  display: block;
                   font-weight: 700;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
                 }
-            data-is-focusable={true}
-            role="text"
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            role="none"
           >
-            two
+            <span
+              data-is-focusable={true}
+              role="text"
+            >
+              two
+            </span>
+            <div
+              hidden={true}
+              id="tooltip5"
+              style={
+                Object {
+                  "border": 0,
+                  "height": 1,
+                  "margin": -1,
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "absolute",
+                  "whiteSpace": "nowrap",
+                  "width": 1,
+                }
+              }
+            >
+              two
+            </div>
           </div>
           <div
             className=
@@ -220,7 +282,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone6"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -503,14 +565,45 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
         >
           <div
             className=
-
+                ms-TooltipHost
                 {
+                  display: block;
                   font-weight: 700;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
                 }
-            data-is-focusable={true}
-            role="text"
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            role="none"
           >
-            one
+            <span
+              data-is-focusable={true}
+              role="text"
+            >
+              one
+            </span>
+            <div
+              hidden={true}
+              id="tooltip2"
+              style={
+                Object {
+                  "border": 0,
+                  "height": 1,
+                  "margin": -1,
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "absolute",
+                  "whiteSpace": "nowrap",
+                  "width": 1,
+                }
+              }
+            >
+              one
+            </div>
           </div>
           <div
             className=
@@ -531,7 +624,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone2"
+        data-focuszone-id="FocusZone3"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -617,7 +710,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone3"
+        data-focuszone-id="FocusZone4"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -638,14 +731,45 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
         >
           <div
             className=
-
+                ms-TooltipHost
                 {
+                  display: block;
                   font-weight: 700;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
                 }
-            data-is-focusable={true}
-            role="text"
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            role="none"
           >
-            two
+            <span
+              data-is-focusable={true}
+              role="text"
+            >
+              two
+            </span>
+            <div
+              hidden={true}
+              id="tooltip5"
+              style={
+                Object {
+                  "border": 0,
+                  "height": 1,
+                  "margin": -1,
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "absolute",
+                  "whiteSpace": "nowrap",
+                  "width": 1,
+                }
+              }
+            >
+              two
+            </div>
           </div>
           <div
             className=
@@ -666,7 +790,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone6"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
index 523d5f5d84d9c5..684b978cd039bc 100644
--- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
@@ -13,6 +13,7 @@ import {
 import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
 import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
 import { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';
+import { TooltipHost, TooltipOverflowMode } from '@fluentui/react';
 
 const getClassNames = classNamesFunction<IMultiStackedBarChartStyleProps, IMultiStackedBarChartStyles>();
 
@@ -237,9 +238,13 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
         <FocusZone direction={FocusZoneDirection.horizontal}>
           <div className={this._classNames.chartTitle}>
             {data!.chartTitle && (
-              <div {...getAccessibleDataObject(data!.chartTitleAccessibilityData)}>
-                <strong>{data!.chartTitle}</strong>
-              </div>
+              <TooltipHost
+                overflowMode={TooltipOverflowMode.Self}
+                hostClassName={this._classNames.chartTitleLeft}
+                content={data!.chartTitle}
+              >
+                <span {...getAccessibleDataObject(data!.chartTitleAccessibilityData)}>{data!.chartTitle}</span>
+              </TooltipHost>
             )}
             {showRatio && (
               <div {...getAccessibleDataObject(data!.chartDataAccessibilityData)}>
diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.styles.ts b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.styles.ts
index a083018e6070c8..bfd1e861b140c8 100644
--- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.styles.ts
+++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.styles.ts
@@ -1,4 +1,5 @@
 import { IMultiStackedBarChartStyleProps, IMultiStackedBarChartStyles } from './MultiStackedBarChart.types';
+import { FontWeights } from '@fluentui/react/lib/Styling';
 
 export const getMultiStackedBarChartStyles = (props: IMultiStackedBarChartStyleProps): IMultiStackedBarChartStyles => {
   const { className, width, barHeight, shouldHighlight, theme, href } = props;
@@ -26,6 +27,13 @@ export const getMultiStackedBarChartStyles = (props: IMultiStackedBarChartStyleP
       justifyContent: 'space-between',
       marginBottom: '3px',
     },
+    chartTitleLeft: {
+      fontWeight: FontWeights.bold,
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      display: 'block',
+    },
     singleChartRoot: {
       width: width ? width : '100%',
       display: 'flex',
diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.types.ts b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.types.ts
index 09eca46a0101dd..d54b23100f4b75 100644
--- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.types.ts
+++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.types.ts
@@ -168,6 +168,11 @@ export interface IMultiStackedBarChartStyles {
    */
   chartTitle: IStyle;
 
+  /**
+   * Style for left side text of the chart title
+   */
+  chartTitleLeft: IStyle;
+
   /**
    * Style to change the opacity of bars in dataviz when we hover on a single bar or legends
    */
diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
index a62c7db2f19c8b..a850ec9bd3969d 100644
--- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
@@ -7,6 +7,7 @@ import { IRefArrayData, IStackedBarChartProps, IStackedBarChartStyleProps, IStac
 import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
 import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
 import { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';
+import { TooltipHost, TooltipOverflowMode } from '@fluentui/react';
 
 const getClassNames = classNamesFunction<IStackedBarChartStyleProps, IStackedBarChartStyles>();
 export interface IStackedBarChartState {
@@ -105,9 +106,13 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
         <FocusZone direction={FocusZoneDirection.horizontal}>
           <div className={this._classNames.chartTitle}>
             {data!.chartTitle && (
-              <div {...getAccessibleDataObject(data!.chartTitleAccessibilityData)}>
-                <strong>{data!.chartTitle}</strong>
-              </div>
+              <TooltipHost
+                overflowMode={TooltipOverflowMode.Self}
+                hostClassName={this._classNames.chartTitleLeft}
+                content={data!.chartTitle}
+              >
+                <span {...getAccessibleDataObject(data!.chartTitleAccessibilityData)}>{data!.chartTitle}</span>
+              </TooltipHost>
             )}
             {showRatio && (
               <div {...getAccessibleDataObject(data!.chartDataAccessibilityData)}>
diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.styles.ts b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.styles.ts
index ecb1bc992e2d42..3e6154f92fbdfb 100644
--- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.styles.ts
+++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.styles.ts
@@ -36,6 +36,13 @@ export const getStyles = (props: IStackedBarChartStyleProps): IStackedBarChartSt
       justifyContent: 'space-between',
       marginBottom: '3px',
     },
+    chartTitleLeft: {
+      fontWeight: FontWeights.bold,
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      display: 'block',
+    },
     legendContainer: {
       margin: '4px 0px 0px 4px',
     },
diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.types.ts b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.types.ts
index 5fe5d7d2a77043..43dbf3d23febcf 100644
--- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.types.ts
+++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.types.ts
@@ -210,6 +210,11 @@ export interface IStackedBarChartStyles {
    */
   chartTitle: IStyle;
 
+  /**
+   * Style for left side text of the chart title
+   */
+  chartTitleLeft: IStyle;
+
   /**
    * Style for the legend container div
    */
diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
index fee1e650bf6f23..09b67808422bb9 100644
--- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/MultiStackedBarChart.test.tsx.snap
@@ -55,12 +55,46 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
               }
         >
           <div
-            data-is-focusable={true}
-            role="text"
+            className=
+                ms-TooltipHost
+                {
+                  display: block;
+                  font-weight: 700;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            role="none"
           >
-            <strong>
+            <span
+              data-is-focusable={true}
+              role="text"
+            >
               Monitored
-            </strong>
+            </span>
+            <div
+              hidden={true}
+              id="tooltip2"
+              style={
+                Object {
+                  "border": 0,
+                  "height": 1,
+                  "margin": -1,
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "absolute",
+                  "whiteSpace": "nowrap",
+                  "width": 1,
+                }
+              }
+            >
+              Monitored
+            </div>
           </div>
           <div
             data-is-focusable={true}
@@ -82,7 +116,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone2"
+        data-focuszone-id="FocusZone3"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -187,7 +221,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone3"
+        data-focuszone-id="FocusZone4"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -207,12 +241,46 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
               }
         >
           <div
-            data-is-focusable={true}
-            role="text"
+            className=
+                ms-TooltipHost
+                {
+                  display: block;
+                  font-weight: 700;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            role="none"
           >
-            <strong>
+            <span
+              data-is-focusable={true}
+              role="text"
+            >
               Unmonitored
-            </strong>
+            </span>
+            <div
+              hidden={true}
+              id="tooltip5"
+              style={
+                Object {
+                  "border": 0,
+                  "height": 1,
+                  "margin": -1,
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "absolute",
+                  "whiteSpace": "nowrap",
+                  "width": 1,
+                }
+              }
+            >
+              Unmonitored
+            </div>
           </div>
           <div
             data-is-focusable={true}
@@ -234,7 +302,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone6"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -367,7 +435,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone5"
+              data-focuszone-id="FocusZone7"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -610,12 +678,46 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
               }
         >
           <div
-            data-is-focusable={true}
-            role="text"
+            className=
+                ms-TooltipHost
+                {
+                  display: block;
+                  font-weight: 700;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            role="none"
           >
-            <strong>
+            <span
+              data-is-focusable={true}
+              role="text"
+            >
               Monitored
-            </strong>
+            </span>
+            <div
+              hidden={true}
+              id="tooltip2"
+              style={
+                Object {
+                  "border": 0,
+                  "height": 1,
+                  "margin": -1,
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "absolute",
+                  "whiteSpace": "nowrap",
+                  "width": 1,
+                }
+              }
+            >
+              Monitored
+            </div>
           </div>
           <div
             data-is-focusable={true}
@@ -637,7 +739,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone2"
+        data-focuszone-id="FocusZone3"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -742,7 +844,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone3"
+        data-focuszone-id="FocusZone4"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -762,12 +864,46 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
               }
         >
           <div
-            data-is-focusable={true}
-            role="text"
+            className=
+                ms-TooltipHost
+                {
+                  display: block;
+                  font-weight: 700;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            role="none"
           >
-            <strong>
+            <span
+              data-is-focusable={true}
+              role="text"
+            >
               Unmonitored
-            </strong>
+            </span>
+            <div
+              hidden={true}
+              id="tooltip5"
+              style={
+                Object {
+                  "border": 0,
+                  "height": 1,
+                  "margin": -1,
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "absolute",
+                  "whiteSpace": "nowrap",
+                  "width": 1,
+                }
+              }
+            >
+              Unmonitored
+            </div>
           </div>
           <div
             data-is-focusable={true}
@@ -789,7 +925,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone6"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -922,7 +1058,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone5"
+              data-focuszone-id="FocusZone7"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1082,12 +1218,46 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
               }
         >
           <div
-            data-is-focusable={true}
-            role="text"
+            className=
+                ms-TooltipHost
+                {
+                  display: block;
+                  font-weight: 700;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            role="none"
           >
-            <strong>
+            <span
+              data-is-focusable={true}
+              role="text"
+            >
               Monitored
-            </strong>
+            </span>
+            <div
+              hidden={true}
+              id="tooltip2"
+              style={
+                Object {
+                  "border": 0,
+                  "height": 1,
+                  "margin": -1,
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "absolute",
+                  "whiteSpace": "nowrap",
+                  "width": 1,
+                }
+              }
+            >
+              Monitored
+            </div>
           </div>
           <div
             data-is-focusable={true}
@@ -1109,7 +1279,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone2"
+        data-focuszone-id="FocusZone3"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1208,7 +1378,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone3"
+        data-focuszone-id="FocusZone4"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1228,12 +1398,46 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
               }
         >
           <div
-            data-is-focusable={true}
-            role="text"
+            className=
+                ms-TooltipHost
+                {
+                  display: block;
+                  font-weight: 700;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            role="none"
           >
-            <strong>
+            <span
+              data-is-focusable={true}
+              role="text"
+            >
               Unmonitored
-            </strong>
+            </span>
+            <div
+              hidden={true}
+              id="tooltip5"
+              style={
+                Object {
+                  "border": 0,
+                  "height": 1,
+                  "margin": -1,
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "absolute",
+                  "whiteSpace": "nowrap",
+                  "width": 1,
+                }
+              }
+            >
+              Unmonitored
+            </div>
           </div>
           <div
             data-is-focusable={true}
@@ -1255,7 +1459,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone6"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1384,7 +1588,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone5"
+              data-focuszone-id="FocusZone7"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1446,7 +1650,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone24"
+        data-focuszone-id="FocusZone32"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1466,12 +1670,46 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
               }
         >
           <div
-            data-is-focusable={true}
-            role="text"
+            className=
+                ms-TooltipHost
+                {
+                  display: block;
+                  font-weight: 700;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            role="none"
           >
-            <strong>
+            <span
+              data-is-focusable={true}
+              role="text"
+            >
               Monitored
-            </strong>
+            </span>
+            <div
+              hidden={true}
+              id="tooltip33"
+              style={
+                Object {
+                  "border": 0,
+                  "height": 1,
+                  "margin": -1,
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "absolute",
+                  "whiteSpace": "nowrap",
+                  "width": 1,
+                }
+              }
+            >
+              Monitored
+            </div>
           </div>
           <div
             data-is-focusable={true}
@@ -1489,7 +1727,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone25"
+        data-focuszone-id="FocusZone34"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1506,7 +1744,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
           >
             <g
               aria-label="Multi stacked bar chart"
-              aria-labelledby="callout23"
+              aria-labelledby="callout31"
               className=
 
                   {
@@ -1537,7 +1775,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
             </g>
             <g
               aria-label="Multi stacked bar chart"
-              aria-labelledby="callout23"
+              aria-labelledby="callout31"
               className=
 
                   {
@@ -1588,7 +1826,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone26"
+        data-focuszone-id="FocusZone35"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1608,12 +1846,46 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
               }
         >
           <div
-            data-is-focusable={true}
-            role="text"
+            className=
+                ms-TooltipHost
+                {
+                  display: block;
+                  font-weight: 700;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            role="none"
           >
-            <strong>
+            <span
+              data-is-focusable={true}
+              role="text"
+            >
               Unmonitored
-            </strong>
+            </span>
+            <div
+              hidden={true}
+              id="tooltip36"
+              style={
+                Object {
+                  "border": 0,
+                  "height": 1,
+                  "margin": -1,
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "absolute",
+                  "whiteSpace": "nowrap",
+                  "width": 1,
+                }
+              }
+            >
+              Unmonitored
+            </div>
           </div>
           <div
             data-is-focusable={true}
@@ -1631,7 +1903,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone27"
+        data-focuszone-id="FocusZone37"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1648,7 +1920,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
           >
             <g
               aria-label="Multi stacked bar chart"
-              aria-labelledby="callout23"
+              aria-labelledby="callout31"
               className=
 
                   {
@@ -1679,7 +1951,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
             </g>
             <g
               aria-label="Multi stacked bar chart"
-              aria-labelledby="callout23"
+              aria-labelledby="callout31"
               className=
 
                   {
@@ -1760,7 +2032,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone28"
+              data-focuszone-id="FocusZone38"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1822,7 +2094,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone7"
+        data-focuszone-id="FocusZone9"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1842,12 +2114,46 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
               }
         >
           <div
-            data-is-focusable={true}
-            role="text"
+            className=
+                ms-TooltipHost
+                {
+                  display: block;
+                  font-weight: 700;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            role="none"
           >
-            <strong>
+            <span
+              data-is-focusable={true}
+              role="text"
+            >
               Monitored
-            </strong>
+            </span>
+            <div
+              hidden={true}
+              id="tooltip10"
+              style={
+                Object {
+                  "border": 0,
+                  "height": 1,
+                  "margin": -1,
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "absolute",
+                  "whiteSpace": "nowrap",
+                  "width": 1,
+                }
+              }
+            >
+              Monitored
+            </div>
           </div>
           <div
             data-is-focusable={true}
@@ -1869,7 +2175,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone8"
+        data-focuszone-id="FocusZone11"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1886,7 +2192,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
           >
             <g
               aria-label="Multi stacked bar chart"
-              aria-labelledby="callout6"
+              aria-labelledby="callout8"
               className=
 
                   {
@@ -1917,7 +2223,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             </g>
             <g
               aria-label="Multi stacked bar chart"
-              aria-labelledby="callout6"
+              aria-labelledby="callout8"
               className=
 
                   {
@@ -1968,7 +2274,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone9"
+        data-focuszone-id="FocusZone12"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1988,12 +2294,46 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
               }
         >
           <div
-            data-is-focusable={true}
-            role="text"
+            className=
+                ms-TooltipHost
+                {
+                  display: block;
+                  font-weight: 700;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            role="none"
           >
-            <strong>
+            <span
+              data-is-focusable={true}
+              role="text"
+            >
               Unmonitored
-            </strong>
+            </span>
+            <div
+              hidden={true}
+              id="tooltip13"
+              style={
+                Object {
+                  "border": 0,
+                  "height": 1,
+                  "margin": -1,
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "absolute",
+                  "whiteSpace": "nowrap",
+                  "width": 1,
+                }
+              }
+            >
+              Unmonitored
+            </div>
           </div>
           <div
             data-is-focusable={true}
@@ -2015,7 +2355,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone10"
+        data-focuszone-id="FocusZone14"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2032,7 +2372,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
           >
             <g
               aria-label="Multi stacked bar chart"
-              aria-labelledby="callout6"
+              aria-labelledby="callout8"
               className=
 
                   {
@@ -2063,7 +2403,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             </g>
             <g
               aria-label="Multi stacked bar chart"
-              aria-labelledby="callout6"
+              aria-labelledby="callout8"
               className=
 
                   {
@@ -2136,7 +2476,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone18"
+        data-focuszone-id="FocusZone24"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2156,12 +2496,46 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
               }
         >
           <div
-            data-is-focusable={true}
-            role="text"
+            className=
+                ms-TooltipHost
+                {
+                  display: block;
+                  font-weight: 700;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            role="none"
           >
-            <strong>
+            <span
+              data-is-focusable={true}
+              role="text"
+            >
               Monitored
-            </strong>
+            </span>
+            <div
+              hidden={true}
+              id="tooltip25"
+              style={
+                Object {
+                  "border": 0,
+                  "height": 1,
+                  "margin": -1,
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "absolute",
+                  "whiteSpace": "nowrap",
+                  "width": 1,
+                }
+              }
+            >
+              Monitored
+            </div>
           </div>
         </div>
       </div>
@@ -2171,7 +2545,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone19"
+        data-focuszone-id="FocusZone26"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2188,7 +2562,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
           >
             <g
               aria-label="Multi stacked bar chart"
-              aria-labelledby="callout17"
+              aria-labelledby="callout23"
               className=
 
                   {
@@ -2219,7 +2593,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             </g>
             <g
               aria-label="Multi stacked bar chart"
-              aria-labelledby="callout17"
+              aria-labelledby="callout23"
               className=
 
                   {
@@ -2270,7 +2644,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone20"
+        data-focuszone-id="FocusZone27"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2290,12 +2664,46 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
               }
         >
           <div
-            data-is-focusable={true}
-            role="text"
+            className=
+                ms-TooltipHost
+                {
+                  display: block;
+                  font-weight: 700;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            role="none"
           >
-            <strong>
+            <span
+              data-is-focusable={true}
+              role="text"
+            >
               Unmonitored
-            </strong>
+            </span>
+            <div
+              hidden={true}
+              id="tooltip28"
+              style={
+                Object {
+                  "border": 0,
+                  "height": 1,
+                  "margin": -1,
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "absolute",
+                  "whiteSpace": "nowrap",
+                  "width": 1,
+                }
+              }
+            >
+              Unmonitored
+            </div>
           </div>
           <div
             data-is-focusable={true}
@@ -2317,7 +2725,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone21"
+        data-focuszone-id="FocusZone29"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2334,7 +2742,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
           >
             <g
               aria-label="Multi stacked bar chart"
-              aria-labelledby="callout17"
+              aria-labelledby="callout23"
               className=
 
                   {
@@ -2365,7 +2773,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             </g>
             <g
               aria-label="Multi stacked bar chart"
-              aria-labelledby="callout17"
+              aria-labelledby="callout23"
               className=
 
                   {
@@ -2446,7 +2854,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone22"
+              data-focuszone-id="FocusZone30"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2689,7 +3097,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone12"
+        data-focuszone-id="FocusZone16"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2709,12 +3117,46 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
               }
         >
           <div
-            data-is-focusable={true}
-            role="text"
+            className=
+                ms-TooltipHost
+                {
+                  display: block;
+                  font-weight: 700;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            role="none"
           >
-            <strong>
+            <span
+              data-is-focusable={true}
+              role="text"
+            >
               Monitored
-            </strong>
+            </span>
+            <div
+              hidden={true}
+              id="tooltip17"
+              style={
+                Object {
+                  "border": 0,
+                  "height": 1,
+                  "margin": -1,
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "absolute",
+                  "whiteSpace": "nowrap",
+                  "width": 1,
+                }
+              }
+            >
+              Monitored
+            </div>
           </div>
           <div
             data-is-focusable={true}
@@ -2736,7 +3178,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone13"
+        data-focuszone-id="FocusZone18"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2753,7 +3195,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
           >
             <g
               aria-label="Multi stacked bar chart"
-              aria-labelledby="callout11"
+              aria-labelledby="callout15"
               className=
 
                   {
@@ -2784,7 +3226,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
             </g>
             <g
               aria-label="Multi stacked bar chart"
-              aria-labelledby="callout11"
+              aria-labelledby="callout15"
               className=
 
                   {
@@ -2835,7 +3277,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone14"
+        data-focuszone-id="FocusZone19"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2855,12 +3297,46 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
               }
         >
           <div
-            data-is-focusable={true}
-            role="text"
+            className=
+                ms-TooltipHost
+                {
+                  display: block;
+                  font-weight: 700;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+            onBlurCapture={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            role="none"
           >
-            <strong>
+            <span
+              data-is-focusable={true}
+              role="text"
+            >
               Unmonitored
-            </strong>
+            </span>
+            <div
+              hidden={true}
+              id="tooltip20"
+              style={
+                Object {
+                  "border": 0,
+                  "height": 1,
+                  "margin": -1,
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "absolute",
+                  "whiteSpace": "nowrap",
+                  "width": 1,
+                }
+              }
+            >
+              Unmonitored
+            </div>
           </div>
           <div
             data-is-focusable={true}
@@ -2882,7 +3358,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone15"
+        data-focuszone-id="FocusZone21"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2899,7 +3375,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
           >
             <g
               aria-label="Multi stacked bar chart"
-              aria-labelledby="callout11"
+              aria-labelledby="callout15"
               className=
 
                   {
@@ -2930,7 +3406,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
             </g>
             <g
               aria-label="Multi stacked bar chart"
-              aria-labelledby="callout11"
+              aria-labelledby="callout15"
               className=
 
                   {
@@ -3011,7 +3487,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone16"
+              data-focuszone-id="FocusZone22"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap
index 39168679e0ee54..ec52326359ce41 100644
--- a/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/StackedBarChart/__snapshots__/StackedBarChart.test.tsx.snap
@@ -42,12 +42,46 @@ exports[`StackedBarChart - mouse events Should render callout correctly on mouse
           }
     >
       <div
-        data-is-focusable={true}
-        role="text"
+        className=
+            ms-TooltipHost
+            {
+              display: block;
+              font-weight: 700;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+        onBlurCapture={[Function]}
+        onFocusCapture={[Function]}
+        onKeyDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        role="none"
       >
-        <strong>
+        <span
+          data-is-focusable={true}
+          role="text"
+        >
+          Stacked bar chart 2nd example
+        </span>
+        <div
+          hidden={true}
+          id="tooltip2"
+          style={
+            Object {
+              "border": 0,
+              "height": 1,
+              "margin": -1,
+              "overflow": "hidden",
+              "padding": 0,
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": 1,
+            }
+          }
+        >
           Stacked bar chart 2nd example
-        </strong>
+        </div>
       </div>
       <div
         data-is-focusable={true}
@@ -87,7 +121,7 @@ exports[`StackedBarChart - mouse events Should render callout correctly on mouse
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone2"
+    data-focuszone-id="FocusZone3"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -383,12 +417,46 @@ exports[`StackedBarChart - mouse events Should render customized callout on mous
           }
     >
       <div
-        data-is-focusable={true}
-        role="text"
+        className=
+            ms-TooltipHost
+            {
+              display: block;
+              font-weight: 700;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+        onBlurCapture={[Function]}
+        onFocusCapture={[Function]}
+        onKeyDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        role="none"
       >
-        <strong>
+        <span
+          data-is-focusable={true}
+          role="text"
+        >
+          Stacked bar chart 2nd example
+        </span>
+        <div
+          hidden={true}
+          id="tooltip2"
+          style={
+            Object {
+              "border": 0,
+              "height": 1,
+              "margin": -1,
+              "overflow": "hidden",
+              "padding": 0,
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": 1,
+            }
+          }
+        >
           Stacked bar chart 2nd example
-        </strong>
+        </div>
       </div>
       <div
         data-is-focusable={true}
@@ -428,7 +496,7 @@ exports[`StackedBarChart - mouse events Should render customized callout on mous
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone2"
+    data-focuszone-id="FocusZone3"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -641,12 +709,46 @@ exports[`StackedBarChart snapShot testing renders StackedBarChart correctly 1`]
           }
     >
       <div
-        data-is-focusable={true}
-        role="text"
+        className=
+            ms-TooltipHost
+            {
+              display: block;
+              font-weight: 700;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+        onBlurCapture={[Function]}
+        onFocusCapture={[Function]}
+        onKeyDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        role="none"
       >
-        <strong>
+        <span
+          data-is-focusable={true}
+          role="text"
+        >
+          Stacked bar chart 2nd example
+        </span>
+        <div
+          hidden={true}
+          id="tooltip2"
+          style={
+            Object {
+              "border": 0,
+              "height": 1,
+              "margin": -1,
+              "overflow": "hidden",
+              "padding": 0,
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": 1,
+            }
+          }
+        >
           Stacked bar chart 2nd example
-        </strong>
+        </div>
       </div>
       <div
         data-is-focusable={true}
@@ -686,7 +788,7 @@ exports[`StackedBarChart snapShot testing renders StackedBarChart correctly 1`]
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone2"
+    data-focuszone-id="FocusZone3"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -799,7 +901,7 @@ exports[`StackedBarChart snapShot testing renders enabledLegendsWrapLines correc
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone20"
+    data-focuszone-id="FocusZone26"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -819,12 +921,46 @@ exports[`StackedBarChart snapShot testing renders enabledLegendsWrapLines correc
           }
     >
       <div
-        data-is-focusable={true}
-        role="text"
+        className=
+            ms-TooltipHost
+            {
+              display: block;
+              font-weight: 700;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+        onBlurCapture={[Function]}
+        onFocusCapture={[Function]}
+        onKeyDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        role="none"
       >
-        <strong>
+        <span
+          data-is-focusable={true}
+          role="text"
+        >
+          Stacked bar chart 2nd example
+        </span>
+        <div
+          hidden={true}
+          id="tooltip27"
+          style={
+            Object {
+              "border": 0,
+              "height": 1,
+              "margin": -1,
+              "overflow": "hidden",
+              "padding": 0,
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": 1,
+            }
+          }
+        >
           Stacked bar chart 2nd example
-        </strong>
+        </div>
       </div>
       <div
         data-is-focusable={true}
@@ -864,7 +1000,7 @@ exports[`StackedBarChart snapShot testing renders enabledLegendsWrapLines correc
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone21"
+    data-focuszone-id="FocusZone28"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -883,7 +1019,7 @@ exports[`StackedBarChart snapShot testing renders enabledLegendsWrapLines correc
         <g>
           <g
             aria-label="Stacked bar chart"
-            aria-labelledby="callout19"
+            aria-labelledby="callout25"
             className=
 
                 {
@@ -915,7 +1051,7 @@ exports[`StackedBarChart snapShot testing renders enabledLegendsWrapLines correc
           </g>
           <g
             aria-label="Stacked bar chart"
-            aria-labelledby="callout19"
+            aria-labelledby="callout25"
             className=
 
                 {
@@ -977,7 +1113,7 @@ exports[`StackedBarChart snapShot testing renders hideDenominator correctly 1`]
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone13"
+    data-focuszone-id="FocusZone17"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -997,12 +1133,46 @@ exports[`StackedBarChart snapShot testing renders hideDenominator correctly 1`]
           }
     >
       <div
-        data-is-focusable={true}
-        role="text"
+        className=
+            ms-TooltipHost
+            {
+              display: block;
+              font-weight: 700;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+        onBlurCapture={[Function]}
+        onFocusCapture={[Function]}
+        onKeyDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        role="none"
       >
-        <strong>
+        <span
+          data-is-focusable={true}
+          role="text"
+        >
+          Stacked bar chart 2nd example
+        </span>
+        <div
+          hidden={true}
+          id="tooltip18"
+          style={
+            Object {
+              "border": 0,
+              "height": 1,
+              "margin": -1,
+              "overflow": "hidden",
+              "padding": 0,
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": 1,
+            }
+          }
+        >
           Stacked bar chart 2nd example
-        </strong>
+        </div>
       </div>
       <div
         data-is-focusable={true}
@@ -1028,7 +1198,7 @@ exports[`StackedBarChart snapShot testing renders hideDenominator correctly 1`]
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone14"
+    data-focuszone-id="FocusZone19"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1047,7 +1217,7 @@ exports[`StackedBarChart snapShot testing renders hideDenominator correctly 1`]
         <g>
           <g
             aria-label="Stacked bar chart"
-            aria-labelledby="callout12"
+            aria-labelledby="callout16"
             className=
 
                 {
@@ -1079,7 +1249,7 @@ exports[`StackedBarChart snapShot testing renders hideDenominator correctly 1`]
           </g>
           <g
             aria-label="Stacked bar chart"
-            aria-labelledby="callout12"
+            aria-labelledby="callout16"
             className=
 
                 {
@@ -1141,7 +1311,7 @@ exports[`StackedBarChart snapShot testing renders hideLegend correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone4"
+    data-focuszone-id="FocusZone5"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1161,12 +1331,46 @@ exports[`StackedBarChart snapShot testing renders hideLegend correctly 1`] = `
           }
     >
       <div
-        data-is-focusable={true}
-        role="text"
+        className=
+            ms-TooltipHost
+            {
+              display: block;
+              font-weight: 700;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+        onBlurCapture={[Function]}
+        onFocusCapture={[Function]}
+        onKeyDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        role="none"
       >
-        <strong>
+        <span
+          data-is-focusable={true}
+          role="text"
+        >
+          Stacked bar chart 2nd example
+        </span>
+        <div
+          hidden={true}
+          id="tooltip6"
+          style={
+            Object {
+              "border": 0,
+              "height": 1,
+              "margin": -1,
+              "overflow": "hidden",
+              "padding": 0,
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": 1,
+            }
+          }
+        >
           Stacked bar chart 2nd example
-        </strong>
+        </div>
       </div>
       <div
         data-is-focusable={true}
@@ -1206,7 +1410,7 @@ exports[`StackedBarChart snapShot testing renders hideLegend correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone5"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1225,7 +1429,7 @@ exports[`StackedBarChart snapShot testing renders hideLegend correctly 1`] = `
         <g>
           <g
             aria-label="Stacked bar chart"
-            aria-labelledby="callout3"
+            aria-labelledby="callout4"
             className=
 
                 {
@@ -1257,7 +1461,7 @@ exports[`StackedBarChart snapShot testing renders hideLegend correctly 1`] = `
           </g>
           <g
             aria-label="Stacked bar chart"
-            aria-labelledby="callout3"
+            aria-labelledby="callout4"
             className=
 
                 {
@@ -1319,7 +1523,7 @@ exports[`StackedBarChart snapShot testing renders hideNumberDisplay correctly 1`
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone10"
+    data-focuszone-id="FocusZone13"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1339,12 +1543,46 @@ exports[`StackedBarChart snapShot testing renders hideNumberDisplay correctly 1`
           }
     >
       <div
-        data-is-focusable={true}
-        role="text"
+        className=
+            ms-TooltipHost
+            {
+              display: block;
+              font-weight: 700;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+        onBlurCapture={[Function]}
+        onFocusCapture={[Function]}
+        onKeyDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        role="none"
       >
-        <strong>
+        <span
+          data-is-focusable={true}
+          role="text"
+        >
+          Stacked bar chart 2nd example
+        </span>
+        <div
+          hidden={true}
+          id="tooltip14"
+          style={
+            Object {
+              "border": 0,
+              "height": 1,
+              "margin": -1,
+              "overflow": "hidden",
+              "padding": 0,
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": 1,
+            }
+          }
+        >
           Stacked bar chart 2nd example
-        </strong>
+        </div>
       </div>
     </div>
   </div>
@@ -1354,7 +1592,7 @@ exports[`StackedBarChart snapShot testing renders hideNumberDisplay correctly 1`
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone11"
+    data-focuszone-id="FocusZone15"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1373,7 +1611,7 @@ exports[`StackedBarChart snapShot testing renders hideNumberDisplay correctly 1`
         <g>
           <g
             aria-label="Stacked bar chart"
-            aria-labelledby="callout9"
+            aria-labelledby="callout12"
             className=
 
                 {
@@ -1405,7 +1643,7 @@ exports[`StackedBarChart snapShot testing renders hideNumberDisplay correctly 1`
           </g>
           <g
             aria-label="Stacked bar chart"
-            aria-labelledby="callout9"
+            aria-labelledby="callout12"
             className=
 
                 {
@@ -1467,7 +1705,7 @@ exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone7"
+    data-focuszone-id="FocusZone9"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1487,12 +1725,46 @@ exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = `
           }
     >
       <div
-        data-is-focusable={true}
-        role="text"
+        className=
+            ms-TooltipHost
+            {
+              display: block;
+              font-weight: 700;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+        onBlurCapture={[Function]}
+        onFocusCapture={[Function]}
+        onKeyDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        role="none"
       >
-        <strong>
+        <span
+          data-is-focusable={true}
+          role="text"
+        >
+          Stacked bar chart 2nd example
+        </span>
+        <div
+          hidden={true}
+          id="tooltip10"
+          style={
+            Object {
+              "border": 0,
+              "height": 1,
+              "margin": -1,
+              "overflow": "hidden",
+              "padding": 0,
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": 1,
+            }
+          }
+        >
           Stacked bar chart 2nd example
-        </strong>
+        </div>
       </div>
       <div
         data-is-focusable={true}
@@ -1532,7 +1804,7 @@ exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone8"
+    data-focuszone-id="FocusZone11"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1551,7 +1823,7 @@ exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = `
         <g>
           <g
             aria-label="Stacked bar chart"
-            aria-labelledby="callout6"
+            aria-labelledby="callout8"
             className=
 
                 {
@@ -1583,7 +1855,7 @@ exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = `
           </g>
           <g
             aria-label="Stacked bar chart"
-            aria-labelledby="callout6"
+            aria-labelledby="callout8"
             className=
 
                 {
@@ -1645,7 +1917,7 @@ exports[`StackedBarChart snapShot testing renders ignoreFixStyle correctly 1`] =
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone16"
+    data-focuszone-id="FocusZone21"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1665,12 +1937,46 @@ exports[`StackedBarChart snapShot testing renders ignoreFixStyle correctly 1`] =
           }
     >
       <div
-        data-is-focusable={true}
-        role="text"
+        className=
+            ms-TooltipHost
+            {
+              display: block;
+              font-weight: 700;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+        onBlurCapture={[Function]}
+        onFocusCapture={[Function]}
+        onKeyDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        role="none"
       >
-        <strong>
+        <span
+          data-is-focusable={true}
+          role="text"
+        >
           Stacked bar chart 2nd example
-        </strong>
+        </span>
+        <div
+          hidden={true}
+          id="tooltip22"
+          style={
+            Object {
+              "border": 0,
+              "height": 1,
+              "margin": -1,
+              "overflow": "hidden",
+              "padding": 0,
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": 1,
+            }
+          }
+        >
+          Stacked bar chart 2nd example
+        </div>
       </div>
     </div>
   </div>
@@ -1680,7 +1986,7 @@ exports[`StackedBarChart snapShot testing renders ignoreFixStyle correctly 1`] =
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone17"
+    data-focuszone-id="FocusZone23"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1699,7 +2005,7 @@ exports[`StackedBarChart snapShot testing renders ignoreFixStyle correctly 1`] =
         <g>
           <g
             aria-label="Stacked bar chart"
-            aria-labelledby="callout15"
+            aria-labelledby="callout20"
             className=
 
                 {
@@ -1731,7 +2037,7 @@ exports[`StackedBarChart snapShot testing renders ignoreFixStyle correctly 1`] =
           </g>
           <g
             aria-label="Stacked bar chart"
-            aria-labelledby="callout15"
+            aria-labelledby="callout20"
             className=
 
                 {
@@ -1815,7 +2121,7 @@ exports[`StackedBarChart snapShot testing renders ignoreFixStyle correctly 1`] =
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone18"
+              data-focuszone-id="FocusZone24"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}