diff --git a/change/@fluentui-react-charting-556f2e0e-35f0-44cd-9bd6-aa9b24aaa57e.json b/change/@fluentui-react-charting-556f2e0e-35f0-44cd-9bd6-aa9b24aaa57e.json
new file mode 100644
index 0000000000000..f6d32fb738f20
--- /dev/null
+++ b/change/@fluentui-react-charting-556f2e0e-35f0-44cd-9bd6-aa9b24aaa57e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fixing re-render issue for all charts when empty",
+  "packageName": "@fluentui/react-charting",
+  "email": "srmukher@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
index 02babbaee3754..5a03d7c585b7c 100644
--- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
+++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
@@ -70,7 +70,6 @@ export interface IAreaChartState extends IBasestate {
   nearestCircleToHighlight: number | string | Date | null;
   xAxisCalloutAccessibilityData?: IAccessibilityProps;
   isShowCalloutPending: boolean;
-  emptyChart?: boolean;
   /** focused point */
   activePoint: string;
 }
@@ -107,6 +106,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
   //from O(n^2) to O(n) using a map.
   private _enableComputationOptimization: boolean;
   private _firstRenderOptimization: boolean;
+  private _emptyChartId: string;
 
   public constructor(props: IAreaChartProps) {
     super(props);
@@ -123,17 +123,6 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
       isCircleClicked: false,
       nearestCircleToHighlight: null,
       isShowCalloutPending: false,
-      emptyChart: !(
-        (
-          this.props.data &&
-          this.props.data.lineChartData &&
-          this.props.data.lineChartData.length > 0 &&
-          this.props.data.lineChartData.filter(item => item.data.length === 0).length === 0
-        )
-        // if all the data sets have no data
-        // filtering all items which have no data and checking if the length of the filtered array is 0
-        // which means chart is not empty
-      ),
       activePoint: '',
     };
     warnDeprecations(COMPONENT_NAME, props, {
@@ -146,6 +135,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
     this._tooltipId = getId('AreaChartTooltipID');
     this._enableComputationOptimization = true;
     this._firstRenderOptimization = true;
+    this._emptyChartId = getId('_AreaChart_empty');
   }
 
   public componentDidUpdate() {
@@ -159,7 +149,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
   }
 
   public render(): JSX.Element {
-    if (!this.state.emptyChart) {
+    if (!this._isChartEmpty()) {
       const { lineChartData, chartTitle } = this.props.data;
       const points = this._addDefaultColors(lineChartData);
       const { colors, opacity, stackedInfo, calloutPoints } = this._createSet(points);
@@ -235,7 +225,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
     }
     return (
       <div
-        id={getId('_AreaChart_')}
+        id={this._emptyChartId}
         role={'alert'}
         style={{ opacity: '0' }}
         aria-label={'Graph has no data to display'}
@@ -909,4 +899,18 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
     const yValue = point.yAxisCalloutData || point.y;
     return point.callOutAccessibilityData?.ariaLabel || `${xValue}. ${legend}, ${yValue}.`;
   };
+
+  private _isChartEmpty(): boolean {
+    return !(
+      (
+        this.props.data &&
+        this.props.data.lineChartData &&
+        this.props.data.lineChartData.length > 0 &&
+        this.props.data.lineChartData.filter(item => item.data.length === 0).length === 0
+      )
+      // if all the data sets have no data
+      // filtering all items which have no data and checking if the length of the filtered array is 0
+      // which means chart is not empty
+    );
+  }
 }
diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx
index fb0894f66dd8e..48f2256eb6bd5 100644
--- a/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx
+++ b/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx
@@ -46,7 +46,7 @@ const points: ILineChartPoints[] = [
     color: 'red',
   },
 ];
-const chartPoints = {
+export const chartPoints = {
   chartTitle: 'AreaChart',
   lineChartData: points,
 };
@@ -70,7 +70,7 @@ const emptyPoint = [
     color: 'red',
   },
 ];
-const emptyChartPoints = {
+export const emptyChartPoints = {
   chartTitle: 'EmptyAreaChart',
   lineChartData: emptyPoint,
 };
diff --git a/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx b/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx
new file mode 100644
index 0000000000000..69b422bd6cfa8
--- /dev/null
+++ b/packages/react-charting/src/components/AreaChart/AreaChartRTL.test.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { queryAllByAttribute, render, waitFor } from '@testing-library/react';
+import { chartPoints, emptyChartPoints } from './AreaChart.test';
+import { AreaChart } from './index';
+
+describe('Area chart rendering', () => {
+  test('Should re-render the Area chart with data', async () => {
+    // Arrange
+    const { container, rerender } = render(<AreaChart data={emptyChartPoints} />);
+    const getById = queryAllByAttribute.bind(null, 'id');
+    // Assert
+    expect(container).toMatchSnapshot();
+    expect(getById(container, /_AreaChart_empty/i)).toHaveLength(1);
+    // Act
+    rerender(<AreaChart data={chartPoints} />);
+    await waitFor(() => {
+      // Assert
+      expect(container).toMatchSnapshot();
+      expect(getById(container, /_AreaChart_empty/i)).toHaveLength(0);
+    });
+  });
+});
diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
index adc1d00ad35b3..dd51632647b90 100644
--- a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
+++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -29,7 +29,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -70,7 +70,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -98,7 +98,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -232,7 +232,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -558,7 +558,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -571,7 +571,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -612,7 +612,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -640,7 +640,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -774,7 +774,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -997,7 +997,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1010,7 +1010,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1051,7 +1051,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -1079,7 +1079,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -1213,7 +1213,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1436,7 +1436,7 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1449,7 +1449,7 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1490,7 +1490,7 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -1518,7 +1518,7 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -1618,7 +1618,7 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1755,7 +1755,7 @@ exports[`AreaChart snapShot testing Should render with default colors when line
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1768,7 +1768,7 @@ exports[`AreaChart snapShot testing Should render with default colors when line
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1809,7 +1809,7 @@ exports[`AreaChart snapShot testing Should render with default colors when line
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -1837,7 +1837,7 @@ exports[`AreaChart snapShot testing Should render with default colors when line
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -1977,7 +1977,7 @@ exports[`AreaChart snapShot testing Should render with default colors when line
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2114,7 +2114,7 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2127,7 +2127,7 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2168,7 +2168,7 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -2196,7 +2196,7 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -2336,7 +2336,7 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2473,7 +2473,7 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2486,7 +2486,7 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2527,7 +2527,7 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -2555,7 +2555,7 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -2681,7 +2681,7 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2818,7 +2818,7 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2831,7 +2831,7 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2872,7 +2872,7 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -2900,7 +2900,7 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -3023,7 +3023,7 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone7"
+        data-focuszone-id="FocusZone8"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3157,7 +3157,7 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3170,7 +3170,7 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3211,7 +3211,7 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 315)"
       />
       <g
@@ -3239,7 +3239,7 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -3355,7 +3355,7 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3368,7 +3368,7 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3409,7 +3409,7 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -3437,7 +3437,7 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -3577,7 +3577,7 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3714,7 +3714,7 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3727,7 +3727,7 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3768,7 +3768,7 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -3796,7 +3796,7 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -3936,7 +3936,7 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4073,7 +4073,7 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4086,7 +4086,7 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -4127,7 +4127,7 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -4155,7 +4155,7 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -4295,7 +4295,7 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4432,7 +4432,7 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_5"
+  id="chart_6"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4445,7 +4445,7 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone7"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -4486,7 +4486,7 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_5"
+        id="xAxisGElementchart_6"
         transform="translate(0, 275)"
       />
       <g
@@ -4514,7 +4514,7 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_5"
+        id="yAxisGElementchart_6"
         transform="translate(40, 0)"
       />
       <g>
@@ -4654,7 +4654,7 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap
new file mode 100644
index 0000000000000..8df081a9230a2
--- /dev/null
+++ b/packages/react-charting/src/components/AreaChart/__snapshots__/AreaChartRTL.test.tsx.snap
@@ -0,0 +1,5103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Area chart rendering Should re-render the Area chart with data 1`] = `
+<div>
+  <div
+    aria-label="Graph has no data to display"
+    id="_AreaChart_empty11"
+    role="alert"
+    style="opacity: 0;"
+  />
+</div>
+`;
+
+exports[`Area chart rendering Should re-render the Area chart with data 2`] = `
+<div>
+  <div
+    class=
+
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          display: flex;
+          flex-direction: column;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: 100%;
+          overflow: hidden;
+          width: 100%;
+        }
+    id="chart_12"
+    role="presentation"
+  >
+    <div
+      class=
+          ms-FocusZone
+          &:focus {
+            outline: none;
+          }
+          {
+            overflow: auto;
+          }
+      data-focuszone-id="FocusZone13"
+    >
+      <svg
+        aria-label="AreaChart"
+        focusable="false"
+        height="0"
+        style="display: block;"
+        width="0"
+      >
+        <g
+          class=
+
+              & text {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                fill: #323130;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 10px;
+                font-weight: 600;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                fill: rgb(179, 179, 179);
+              }
+              & line {
+                opacity: 0.2;
+                stroke: #323130;
+                width: 1px;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+                opacity: 0.1;
+                stroke: rgb(179, 179, 179);
+              }
+              & path {
+                display: none;
+              }
+          id="xAxisGElementchart_12"
+          transform="translate(0, -35)"
+        />
+        <g
+          class=
+
+              & text {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                fill: #323130;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 10px;
+                font-weight: 600;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                fill: rgb(179, 179, 179);
+              }
+              & path {
+                display: none;
+              }
+              & line {
+                opacity: 0.2;
+                stroke: #323130;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+                opacity: 0.1;
+                stroke: rgb(179, 179, 179);
+              }
+          id="yAxisGElementchart_12"
+          transform="translate(40, 0)"
+        />
+        <g>
+          <rect
+            fill="transparent"
+            height="-20"
+            id="rectangle9"
+            width="-20"
+          />
+        </g>
+        <g>
+          <path
+            d="M40,-0.625L-20,20"
+            fill="transparent"
+            id="0-line-areaChart_6"
+            opacity="1"
+            stroke="red"
+            stroke-width="3"
+          />
+          <path
+            d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+            fill="red"
+            fill-opacity="0.7"
+            id="0-graph-areaChart_6"
+            opacity="1"
+          />
+          <g
+            clip-path="url(#clip)"
+            d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          >
+            <circle
+              aria-label="20. metaData1, 50."
+              cx="40"
+              cy="-0.625"
+              data-is-focusable="true"
+              fill="red"
+              id="circle8_0"
+              r="0"
+              role="img"
+              stroke="red"
+              stroke-width="3"
+              tabindex="0"
+            />
+            <circle
+              aria-label="40. metaData1, 80."
+              cx="-20"
+              cy="20"
+              data-is-focusable="true"
+              fill="red"
+              id="circle8_1"
+              r="0"
+              role="img"
+              stroke="red"
+              stroke-width="3"
+              tabindex="-1"
+            />
+          </g>
+          <line
+            id="verticalLine_7"
+            opacity="0.5"
+            stroke="red"
+            stroke-dasharray="5.5"
+            stroke-width="1"
+            visibility="hidden"
+            x1="0"
+            x2="0"
+            y1="0"
+            y2="0"
+          />
+        </g>
+      </svg>
+    </div>
+    <div
+      class=
+
+          {
+            margin-left: 20px;
+            margin-top: 8px;
+          }
+    >
+      <div
+        class=
+
+            {
+              align-items: center;
+              margin-bottom: 0;
+              margin-left: -8px;
+              margin-right: 0;
+              margin-top: -8px;
+              white-space: nowrap;
+              width: 100%;
+            }
+      >
+        <div>
+          <div
+            style="position: relative;"
+          >
+            <div
+              data-automation-id="visibleContent"
+              style="position: fixed; visibility: hidden;"
+            >
+              <div
+                aria-label="Legends"
+                aria-multiselectable="false"
+                class=
+                    ms-FocusZone
+                    &:focus {
+                      outline: none;
+                    }
+                data-focuszone-id="FocusZone14"
+                role="listbox"
+              >
+                <div
+                  class=
+                      ms-OverflowSet
+                      {
+                        display: flex;
+                        flex-wrap: wrap;
+                        justify-content: unset;
+                        position: relative;
+                      }
+                  role="group"
+                >
+                  <div
+                    class=
+                        ms-OverflowSet-item
+                        {
+                          display: inherit;
+                          flex-shrink: 0;
+                        }
+                    role="none"
+                  >
+                    <button
+                      aria-label="metaData1"
+                      aria-posinset="1"
+                      aria-selected="false"
+                      aria-setsize="1"
+                      class=
+
+                          {
+                            align-items: center;
+                            background: none;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            outline: transparent;
+                            padding-bottom: 8px;
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            padding-top: 8px;
+                            position: relative;
+                            text-transform: capitalize;
+                          }
+                          &::-moz-focus-inner {
+                            border: 0;
+                          }
+                          .ms-Fabric--isFocusVisible &:focus:after {
+                            border: 1px solid transparent;
+                            bottom: 1px;
+                            content: "";
+                            left: 1px;
+                            outline: 1px solid #605e5c;
+                            position: absolute;
+                            right: 1px;
+                            top: 1px;
+                            z-index: 1;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                            outline-color: #605e5c;
+                          }
+                      data-is-focusable="true"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class=
+
+                            {
+                              background-color: red;
+                              border-color: red;
+                              border: 1px solid;
+                              content: ;
+                              height: 12px;
+                              margin-right: 8px;
+                              width: 12px;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                              content: linear-gradient(to right, red, red);
+                              opacity: ;
+                            }
+                      />
+                      <div
+                        class=
+
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              color: #323130;
+                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                              font-size: 12px;
+                              font-weight: 400;
+                              line-height: 16px;
+                              opacity: ;
+                            }
+                      >
+                        metaData1
+                      </div>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <span
+      class="ms-layer"
+    />
+  </div>
+</div>
+`;
+
+exports[`AreaChart - mouse events Should render callout correctly on mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,115.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <path
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={40}
+            cy={115.625}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+          <circle
+            aria-label="40. metaData1, 80."
+            cx={-20}
+            cy={20}
+            data-is-focusable={true}
+            fill="#ffffff"
+            id="circle2_1"
+            key="circle2_1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={8}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="red"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="visibility"
+          x1={-20}
+          x2={-20}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone8"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+          {
+            animation-duration: 0.367s;
+            animation-fill-mode: both;
+            animation-name: keyframes from{opacity:0;}to{opacity:1;} keyframes from{transform:translate3d(0,-10px,0);pointer-events:none;}to{transform:translate3d(0,0,0);pointer-events:auto;};
+            animation-timing-function: cubic-bezier(.1,.9,.2,1);
+          }
+      data-is-focusable={true}
+      hidden={false}
+      id="toolTipundefined"
+      style={
+        Object {
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div
+          className=
+
+              {
+                background-blend-mode: normal, luminosity;
+                background-color: #ffffff;
+                display: grid;
+                overflow: hidden;
+                padding-bottom: 10px;
+                padding-left: 16px;
+                padding-right: 16px;
+                padding-top: 11px;
+              }
+        >
+          <div
+            className=
+
+                {
+                  display: flex;
+                  flex-direction: row;
+                  justify-content: space-between;
+                }
+            style={Object {}}
+          >
+            <div
+              className=
+
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #605e5c;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 12px;
+                    font-weight: 400;
+                    line-height: 16px;
+                    opacity: 0.8;
+                  }
+              data-is-focusable={false}
+              role="text"
+            >
+              40
+            </div>
+          </div>
+          <div
+            style={Object {}}
+          >
+            <div
+              data-is-focusable={false}
+              key="callout-content-0"
+              role="text"
+              style={Object {}}
+            >
+              <div
+                style={Object {}}
+              >
+                <div
+                  className=
+
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        border-left: 4px solid red;
+                        color: #323130;
+                        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                        font-size: 16px;
+                        font-weight: 400;
+                        margin-top: 13px;
+                        padding-left: 8px;
+                      }
+                      @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                        forced-color-adjust: none;
+                      }
+                  id="0_80"
+                >
+                  <div>
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #605e5c;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                          }
+                          @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+                            color: rgb(255, 255, 255);
+                          }
+                    >
+                       
+                      metaData1
+                    </div>
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 16px;
+                            font-weight: bold;
+                            line-height: 22px;
+                          }
+                          @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+                            color: rgb(255, 255, 255);
+                          }
+                    >
+                      80
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AreaChart - mouse events Should render customized callout on mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,115.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <path
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={40}
+            cy={115.625}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+          <circle
+            aria-label="40. metaData1, 80."
+            cx={-20}
+            cy={20}
+            data-is-focusable={true}
+            fill="#ffffff"
+            id="circle2_1"
+            key="circle2_1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={8}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="red"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="visibility"
+          x1={-20}
+          x2={-20}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone8"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+          {
+            animation-duration: 0.367s;
+            animation-fill-mode: both;
+            animation-name: keyframes from{opacity:0;}to{opacity:1;} keyframes from{transform:translate3d(0,-10px,0);pointer-events:none;}to{transform:translate3d(0,0,0);pointer-events:auto;};
+            animation-timing-function: cubic-bezier(.1,.9,.2,1);
+          }
+      data-is-focusable={true}
+      hidden={false}
+      id="toolTipundefined"
+      style={
+        Object {
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div>
+          <pre>
+            {
+  "x": 40,
+  "values": [
+    {
+      "legend": "metaData1",
+      "y": 80,
+      "color": "red"
+    }
+  ]
+}
+          </pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AreaChart - mouse events Should render customized callout per stack on mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,115.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <path
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={40}
+            cy={115.625}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+          <circle
+            aria-label="40. metaData1, 80."
+            cx={-20}
+            cy={20}
+            data-is-focusable={true}
+            fill="#ffffff"
+            id="circle2_1"
+            key="circle2_1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={8}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="red"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="visibility"
+          x1={-20}
+          x2={-20}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone8"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+          {
+            animation-duration: 0.367s;
+            animation-fill-mode: both;
+            animation-name: keyframes from{opacity:0;}to{opacity:1;} keyframes from{transform:translate3d(0,-10px,0);pointer-events:none;}to{transform:translate3d(0,0,0);pointer-events:auto;};
+            animation-timing-function: cubic-bezier(.1,.9,.2,1);
+          }
+      data-is-focusable={true}
+      hidden={false}
+      id="toolTipundefined"
+      style={
+        Object {
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div>
+          <pre>
+            {
+  "x": 40,
+  "values": [
+    {
+      "legend": "metaData1",
+      "y": 80,
+      "color": "red"
+    }
+  ]
+}
+          </pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AreaChart snapShot testing Should not render circles when optimizeLargeData is true 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,115.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <path
+          aria-label="metaData1, series 1 of 1 with 2 data points."
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          data-is-focusable={true}
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          role="img"
+        />
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone8"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`AreaChart snapShot testing Should render with default colors when line color is not provided 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,115.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="#637cef"
+          strokeWidth={3}
+        />
+        <path
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          fill="#637cef"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={40}
+            cy={115.625}
+            data-is-focusable={true}
+            fill="#637cef"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="#637cef"
+            strokeWidth={3}
+          />
+          <circle
+            aria-label="40. metaData1, 80."
+            cx={-20}
+            cy={20}
+            data-is-focusable={true}
+            fill="#637cef"
+            id="circle2_1"
+            key="circle2_1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="#637cef"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="#637cef"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone8"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #637cef;
+                            border-color: #637cef;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #637cef, #637cef);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,115.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <path
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={40}
+            cy={115.625}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+          <circle
+            aria-label="40. metaData1, 80."
+            cx={-20}
+            cy={20}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_1"
+            key="circle2_1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="red"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone8"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`AreaChart snapShot testing renders Areachart with single point correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={10}
+        />
+      </g>
+      <g>
+        <path
+          d="M10,29.808Z"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <circle
+          cx={10}
+          cy={29.8076923076923}
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          r={6}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M10,29.808L10,275Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={10}
+            cy={29.8076923076923}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="red"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone8"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,115.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <path
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={40}
+            cy={115.625}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+          <circle
+            aria-label="40. metaData1, 80."
+            cx={-20}
+            cy={20}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_1"
+            key="circle2_1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="red"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div
+        aria-label="Legends"
+        aria-multiselectable={false}
+        className=
+            ms-FocusZone
+            &:focus {
+              outline: none;
+            }
+        data-focuszone-id="FocusZone8"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDownCapture={[Function]}
+        role="listbox"
+      >
+        <div
+          className=
+              ms-OverflowSet
+              {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: unset;
+                position: relative;
+              }
+          role="group"
+        >
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="0"
+            role="none"
+          >
+            <button
+              aria-label="metaData1"
+              aria-posinset={1}
+              aria-selected={false}
+              aria-setsize={1}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: red;
+                      border-color: red;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, red, red);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                metaData1
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={350}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 315)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={330}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,130.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <path
+          d="M40,130.625L-20,20L-20,315L40,315Z"
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M40,130.625L-20,20L-20,315L40,315Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={40}
+            cy={130.625}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+          <circle
+            aria-label="40. metaData1, 80."
+            cx={-20}
+            cy={20}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_1"
+            key="circle2_1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="red"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={350}
+        />
+      </g>
+    </svg>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,115.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <path
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={40}
+            cy={115.625}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+          <circle
+            aria-label="40. metaData1, 80."
+            cx={-20}
+            cy={20}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_1"
+            key="circle2_1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="red"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone8"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,115.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <path
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={40}
+            cy={115.625}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+          <circle
+            aria-label="40. metaData1, 80."
+            cx={-20}
+            cy={20}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_1"
+            key="circle2_1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="red"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone8"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,115.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <path
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={40}
+            cy={115.625}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+          <circle
+            aria-label="40. metaData1, 80."
+            cx={-20}
+            cy={20}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_1"
+            key="circle2_1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="red"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone8"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_6"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone7"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="AreaChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_6"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_6"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <rect
+          fill="transparent"
+          height={290}
+          id="rectangle3"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          width={-20}
+        />
+      </g>
+      <g>
+        <path
+          d="M40,115.625L-20,20"
+          fill="transparent"
+          id="0-line-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+          stroke="red"
+          strokeWidth={3}
+        />
+        <path
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          fill="red"
+          fillOpacity={0.7}
+          id="0-graph-areaChart_0"
+          onMouseMove={[Function]}
+          onMouseOut={[Function]}
+          onMouseOver={[Function]}
+          opacity={1}
+        />
+        <g
+          clipPath="url(#clip)"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
+        >
+          <circle
+            aria-label="20. metaData1, 50."
+            cx={40}
+            cy={115.625}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_0"
+            key="circle2_0"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+          <circle
+            aria-label="40. metaData1, 80."
+            cx={-20}
+            cy={20}
+            data-is-focusable={true}
+            fill="red"
+            id="circle2_1"
+            key="circle2_1"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            r={0}
+            role="img"
+            stroke="red"
+            strokeWidth={3}
+          />
+        </g>
+        <line
+          id="verticalLine_1"
+          key="verticalLine_1"
+          opacity={0.5}
+          stroke="red"
+          strokeDasharray={5.5}
+          strokeWidth={1}
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone8"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
diff --git a/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx b/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx
index b4d07ec0fddd4..71280d92ae296 100644
--- a/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx
+++ b/packages/react-charting/src/components/DonutChart/DonutChart.base.tsx
@@ -26,7 +26,6 @@ export interface IDonutChartState {
   selectedLegend: string;
   dataPointCalloutProps?: IChartDataPoint;
   callOutAccessibilityData?: IAccessibilityProps;
-  emptyChart?: boolean;
 }
 
 export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChartState> {
@@ -42,6 +41,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
   private _currentHoverElement: any;
   private _calloutId: string;
   private _calloutAnchorPoint: IChartDataPoint | null;
+  private _emptyChartId: string | null;
 
   public static getDerivedStateFromProps(
     nextProps: Readonly<IDonutChartProps>,
@@ -74,13 +74,13 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
       yCalloutValue: '',
       selectedLegend: '',
       focusedArcId: '',
-      emptyChart: false,
     };
     this._hoverCallback = this._hoverCallback.bind(this);
     this._focusCallback = this._focusCallback.bind(this);
     this._hoverLeave = this._hoverLeave.bind(this);
     this._calloutId = getId('callout');
     this._uniqText = getId('_Pie_');
+    this._emptyChartId = getId('_DonutChart_empty');
   }
   public componentDidMount(): void {
     if (this._rootElem) {
@@ -89,14 +89,6 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
         _height: this._rootElem.offsetHeight - LEGEND_CONTAINER_HEIGHT,
       });
     }
-    const isChartEmpty = !(
-      this.props.data &&
-      this.props.data.chartData &&
-      this.props.data.chartData!.filter((d: IChartDataPoint) => d.data! > 0).length > 0
-    );
-    if (this.state.emptyChart !== isChartEmpty) {
-      this.setState({ emptyChart: isChartEmpty });
-    }
   }
 
   public render(): JSX.Element {
@@ -118,7 +110,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
       Math.min(this.state._width! - donutMarginHorizontal, this.state._height! - donutMarginVertical) / 2;
     const chartData = data && data.chartData?.filter((d: IChartDataPoint) => d.data! > 0);
     const valueInsideDonut = this._valueInsideDonut(this.props.valueInsideDonut!, chartData!);
-    return !this.state.emptyChart ? (
+    return !this._isChartEmpty() ? (
       <div
         className={this._classNames.root}
         ref={(rootElem: HTMLElement | null) => (this._rootElem = rootElem)}
@@ -184,7 +176,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
       </div>
     ) : (
       <div
-        id={getId('_DonutChart_')}
+        id={this._emptyChartId!}
         role={'alert'}
         style={{ opacity: '0' }}
         aria-label={'Graph has no data to display'}
@@ -331,4 +323,12 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
   private _getHighlightedLegend() {
     return this.state.selectedLegend || this.state.activeLegend;
   }
+
+  private _isChartEmpty(): boolean {
+    return !(
+      this.props.data &&
+      this.props.data.chartData &&
+      this.props.data.chartData!.filter((d: IChartDataPoint) => d.data! > 0).length > 0
+    );
+  }
 }
diff --git a/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx b/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx
index 5561d998e37eb..6a8cf183171a0 100644
--- a/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx
+++ b/packages/react-charting/src/components/DonutChart/DonutChart.test.tsx
@@ -42,7 +42,7 @@ export const chartPoints: IChartProps = {
   chartData: points,
 };
 
-const emptyChartPoints: IChartProps = {
+export const emptyChartPoints: IChartProps = {
   chartTitle: chartTitle,
   chartData: [],
 };
diff --git a/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx b/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx
index d0e65307484d4..78c00c84b2c38 100644
--- a/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx
+++ b/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx
@@ -1,204 +1,180 @@
-import { render, screen, queryAllByAttribute, fireEvent, act } from '@testing-library/react';
+import { render, screen, queryAllByAttribute, fireEvent } from '@testing-library/react';
 import { chartPoints } from './DonutChart.test';
 import { DonutChart } from './index';
 import * as React from 'react';
 import { DarkTheme } from '@fluentui/theme-samples';
 import { ThemeProvider } from '@fluentui/react';
 import * as utils from '../../utilities/utilities';
+import { resetIds } from '../../Utilities';
 
-test('Should hide callout on mouse leave', () => {
-  // Arrange
-  const { container } = render(<DonutChart data={chartPoints} innerRadius={55} calloutProps={{ doNotLayer: true }} />);
+describe('Donut chart interactions', () => {
+  beforeEach(() => {
+    resetIds();
+    jest.spyOn(global.Math, 'random').mockReturnValue(0.1);
+  });
+  afterEach(() => {
+    jest.spyOn(global.Math, 'random').mockRestore();
+  });
+  test('Should hide callout on mouse leave', () => {
+    // Arrange
+    const { container } = render(
+      <DonutChart data={chartPoints} innerRadius={55} calloutProps={{ doNotLayer: true }} />,
+    );
 
-  // Act
-  const getById = queryAllByAttribute.bind(null, 'id');
-  fireEvent.mouseOver(getById(container, /Pie/i)[0]);
-  expect(getById(container, /callout/i)[0]).toBeDefined();
-  fireEvent.mouseLeave(getById(container, /Pie/i)[0]);
+    // Act
+    const getById = queryAllByAttribute.bind(null, 'id');
+    fireEvent.mouseOver(getById(container, /Pie/i)[0]);
+    expect(getById(container, /callout/i)[0]).toBeDefined();
+    fireEvent.mouseLeave(getById(container, /Pie/i)[0]);
 
-  // Assert
-  expect(getById(container, /callout/i)[0]).toHaveStyle('opacity: 0');
-  expect(container).toMatchSnapshot();
-});
+    // Assert
+    expect(getById(container, /callout/i)[0]).toHaveStyle('opacity: 0');
+    expect(container).toMatchSnapshot();
+  });
 
-test('Should show callout on focus', () => {
-  // Arrange
-  const { container } = render(<DonutChart data={chartPoints} innerRadius={55} calloutProps={{ doNotLayer: true }} />);
+  test('Should show callout on focus', () => {
+    // Arrange
+    const { container } = render(
+      <DonutChart data={chartPoints} innerRadius={55} calloutProps={{ doNotLayer: true }} />,
+    );
 
-  // Act
-  const getById = queryAllByAttribute.bind(null, 'id');
-  fireEvent.focus(getById(container, /Pie/i)[0]);
+    // Act
+    const getById = queryAllByAttribute.bind(null, 'id');
+    fireEvent.focus(getById(container, /Pie/i)[0]);
 
-  // Assert
-  expect(getById(container, /focusRing/i)).toBeDefined();
-});
+    // Assert
+    expect(getById(container, /focusRing/i)).toBeDefined();
+  });
 
-test('Should remove focus on blur', () => {
-  // Arrange
-  const { container } = render(<DonutChart data={chartPoints} innerRadius={55} calloutProps={{ doNotLayer: true }} />);
+  test('Should remove focus on blur', () => {
+    // Arrange
+    const { container } = render(
+      <DonutChart data={chartPoints} innerRadius={55} calloutProps={{ doNotLayer: true }} />,
+    );
 
-  // Act
-  const getById = queryAllByAttribute.bind(null, 'id');
-  fireEvent.blur(getById(container, /Pie/i)[0]);
+    // Act
+    const getById = queryAllByAttribute.bind(null, 'id');
+    fireEvent.blur(getById(container, /Pie/i)[0]);
 
-  // Assert
-  const value = getById(container, /Pie/i)[0].getAttribute('id');
-  expect(value).not.toContain('focusRing');
-});
+    // Assert
+    const value = getById(container, /Pie/i)[0].getAttribute('id');
+    expect(value).not.toContain('focusRing');
+  });
 
-test('Should highlight the corresponding Pie on mouse over on legends', () => {
-  // Arrange
-  const { container } = render(<DonutChart data={chartPoints} innerRadius={55} hideLegend={false} />);
+  test('Should highlight the corresponding Pie on mouse over on legends', () => {
+    // Arrange
+    const { container } = render(<DonutChart data={chartPoints} innerRadius={55} hideLegend={false} />);
 
-  // Act
-  const legend = screen.queryByText('first');
-  expect(legend).toBeDefined();
-  fireEvent.mouseOver(legend!);
+    // Act
+    const legend = screen.queryByText('first');
+    expect(legend).toBeDefined();
+    fireEvent.mouseOver(legend!);
 
-  // Assert
-  const getById = queryAllByAttribute.bind(null, 'id');
-  expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
-  expect(getById(container, /Pie.*?third/i)[0]).toHaveAttribute('opacity', '0.1');
-});
+    // Assert
+    const getById = queryAllByAttribute.bind(null, 'id');
+    expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
+    expect(getById(container, /Pie.*?third/i)[0]).toHaveAttribute('opacity', '0.1');
+  });
 
-test('Should select legend on single mouse click on legends', () => {
-  // Arrange
-  const { container } = render(<DonutChart data={chartPoints} innerRadius={55} hideLegend={false} />);
-
-  // Act
-  const legend = screen.queryByText('first');
-  expect(legend).toBeDefined();
-  fireEvent.click(legend!);
-
-  // Assert
-  const getById = queryAllByAttribute.bind(null, 'id');
-  expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
-  const firstLegend = screen.queryByText('first')?.closest('button');
-  expect(firstLegend).toHaveAttribute('aria-selected', 'true');
-  expect(firstLegend).toHaveAttribute('tabIndex', '0');
-});
+  test('Should select legend on single mouse click on legends', () => {
+    // Arrange
+    const { container } = render(<DonutChart data={chartPoints} innerRadius={55} hideLegend={false} />);
 
-test('Should deselect legend on double mouse click on legends', () => {
-  // Arrange
-  const { container } = render(<DonutChart data={chartPoints} innerRadius={55} hideLegend={false} />);
-
-  // Act
-  const legend = screen.queryByText('first');
-  expect(legend).toBeDefined();
-
-  //single click on first legend
-  fireEvent.click(legend!);
-  const getById = queryAllByAttribute.bind(null, 'id');
-  expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
-  const firstLegend = screen.queryByText('first')?.closest('button');
-  expect(firstLegend).toHaveAttribute('aria-selected', 'true');
-  expect(firstLegend).toHaveAttribute('tabIndex', '0');
-  // double click on same first legend
-  fireEvent.click(legend!);
-
-  // Assert
-  expect(firstLegend).toHaveAttribute('aria-selected', 'false');
-});
+    // Act
+    const legend = screen.queryByText('first');
+    expect(legend).toBeDefined();
+    fireEvent.click(legend!);
 
-test('Should show Pies with same opacity on mouse out of legends', () => {
-  // Arrange
-  const { container } = render(<DonutChart data={chartPoints} innerRadius={55} hideLegend={false} />);
-
-  // Act
-  const legend = screen.queryByText('first');
-  expect(legend).toBeDefined();
-  fireEvent.mouseOver(legend!);
-  const getById = queryAllByAttribute.bind(null, 'id');
-  expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
-  fireEvent.mouseOut(legend!);
-
-  // Assert
-  expect(getById(container, /Pie.*?first/i)[0]).toHaveAttribute('opacity', '1');
-  expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '1');
-});
+    // Assert
+    const getById = queryAllByAttribute.bind(null, 'id');
+    expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
+    const firstLegend = screen.queryByText('first')?.closest('button');
+    expect(firstLegend).toHaveAttribute('aria-selected', 'true');
+    expect(firstLegend).toHaveAttribute('tabIndex', '0');
+  });
 
-test('Should display correct callout data on mouse move', () => {
-  // Arrange
-  const { container } = render(<DonutChart data={chartPoints} innerRadius={55} calloutProps={{ doNotLayer: true }} />);
+  test('Should deselect legend on double mouse click on legends', () => {
+    // Arrange
+    const { container } = render(<DonutChart data={chartPoints} innerRadius={55} hideLegend={false} />);
 
-  // Act
-  const getById = queryAllByAttribute.bind(null, 'id');
-  fireEvent.mouseOver(getById(container, /Pie/i)[0]);
-  expect(getById(container, /callout/i)[0]).toHaveTextContent('20,000');
-  fireEvent.mouseLeave(getById(container, /Pie/i)[0]);
-  fireEvent.mouseOver(getById(container, /Pie/i)[1]);
+    // Act
+    const legend = screen.queryByText('first');
+    expect(legend).toBeDefined();
+
+    //single click on first legend
+    fireEvent.click(legend!);
+    const getById = queryAllByAttribute.bind(null, 'id');
+    expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
+    const firstLegend = screen.queryByText('first')?.closest('button');
+    expect(firstLegend).toHaveAttribute('aria-selected', 'true');
+    expect(firstLegend).toHaveAttribute('tabIndex', '0');
+    // double click on same first legend
+    fireEvent.click(legend!);
 
-  // Assert
-  expect(getById(container, /callout/i)[0]).toHaveTextContent('39,000');
-});
+    // Assert
+    expect(firstLegend).toHaveAttribute('aria-selected', 'false');
+  });
 
-test('Should reflect theme change', () => {
-  // Arrange
-  const { container } = render(
-    <ThemeProvider theme={DarkTheme}>
-      <DonutChart culture={window.navigator.language} data={chartPoints} innerRadius={55} />
-    </ThemeProvider>,
-  );
+  test('Should show Pies with same opacity on mouse out of legends', () => {
+    // Arrange
+    const { container } = render(<DonutChart data={chartPoints} innerRadius={55} hideLegend={false} />);
 
-  // Assert
-  expect(container).toMatchSnapshot();
-});
+    // Act
+    const legend = screen.queryByText('first');
+    expect(legend).toBeDefined();
+    fireEvent.mouseOver(legend!);
+    const getById = queryAllByAttribute.bind(null, 'id');
+    expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
+    fireEvent.mouseOut(legend!);
 
-describe('Screen resolution', () => {
-  const originalInnerWidth = global.innerWidth;
-  const originalInnerHeight = global.innerHeight;
-  afterEach(() => {
-    global.innerWidth = originalInnerWidth;
-    global.innerHeight = originalInnerHeight;
-    act(() => {
-      global.dispatchEvent(new Event('resize'));
-    });
+    // Assert
+    expect(getById(container, /Pie.*?first/i)[0]).toHaveAttribute('opacity', '1');
+    expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '1');
   });
 
-  test('Should remain unchanged on zoom in', () => {
+  test('Should display correct callout data on mouse move', () => {
     // Arrange
-    const { container } = render(<DonutChart data={chartPoints} innerRadius={55} width={300} height={300} />);
+    const { container } = render(
+      <DonutChart data={chartPoints} innerRadius={55} calloutProps={{ doNotLayer: true }} />,
+    );
 
     // Act
-    global.innerWidth = window.innerWidth / 2;
-    global.innerHeight = window.innerHeight / 2;
-    act(() => {
-      global.dispatchEvent(new Event('resize'));
-    });
+    const getById = queryAllByAttribute.bind(null, 'id');
+    fireEvent.mouseOver(getById(container, /Pie/i)[0]);
+    expect(getById(container, /callout/i)[0]).toHaveTextContent('20,000');
+    fireEvent.mouseLeave(getById(container, /Pie/i)[0]);
+    fireEvent.mouseOver(getById(container, /Pie/i)[1]);
 
     // Assert
-    expect(container).toMatchSnapshot();
+    expect(getById(container, /callout/i)[0]).toHaveTextContent('39,000');
   });
 
-  test('Should remain unchanged on zoom out', () => {
+  test('Should change value inside donut with the legend value on mouseOver legend ', () => {
+    // Mock the implementation of wrapTextInsideDonut as it internally calls a Browser Function like
+    // getComputedTextLength() which will otherwise lead to a crash if mounted
+    jest.spyOn(utils, 'wrapTextInsideDonut').mockImplementation(() => '1000');
     // Arrange
-    const { container } = render(<DonutChart data={chartPoints} innerRadius={55} width={300} height={300} />);
+    const { container } = render(
+      <DonutChart data={chartPoints} innerRadius={55} hideLegend={false} valueInsideDonut={1000} />,
+    );
+    const getByClass = queryAllByAttribute.bind(null, 'class');
 
     // Act
-    global.innerWidth = window.innerWidth * 2;
-    global.innerHeight = window.innerHeight * 2;
-    act(() => {
-      global.dispatchEvent(new Event('resize'));
-    });
+    fireEvent.mouseOver(screen.getByText('first'));
 
     // Assert
-    expect(container).toMatchSnapshot();
+    expect(getByClass(container, /insideDonutString.*?/)[0].textContent).toBe('20,000');
   });
-});
 
-test('Should change value inside donut with the legend value on mouseOver legend ', () => {
-  // Mock the implementation of wrapTextInsideDonut as it internally calls a Browser Function like
-  // getComputedTextLength() which will otherwise lead to a crash if mounted
-  jest.spyOn(utils, 'wrapTextInsideDonut').mockImplementation(() => '1000');
-  // Arrange
-  const { container } = render(
-    <DonutChart data={chartPoints} innerRadius={55} hideLegend={false} valueInsideDonut={1000} />,
-  );
-  const getByClass = queryAllByAttribute.bind(null, 'class');
-
-  // Act
-  fireEvent.mouseOver(screen.getByText('first'));
-
-  // Assert
-  expect(getByClass(container, /insideDonutString.*?/)[0].textContent).toBe('20,000');
+  test('Should reflect theme change', () => {
+    // Arrange
+    const { container } = render(
+      <ThemeProvider theme={DarkTheme}>
+        <DonutChart culture={window.navigator.language} data={chartPoints} innerRadius={55} />
+      </ThemeProvider>,
+    );
+
+    // Assert
+    expect(container).toMatchSnapshot();
+  });
 });
diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
index 13bef1411e049..530573c78d09e 100644
--- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
+++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone2"
+    data-focuszone-id="FocusZone3"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -336,7 +336,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone3"
+              data-focuszone-id="FocusZone4"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -660,7 +660,7 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone2"
+    data-focuszone-id="FocusZone3"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -890,7 +890,7 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone3"
+              data-focuszone-id="FocusZone4"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1214,7 +1214,7 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone21"
+    data-focuszone-id="FocusZone27"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1252,7 +1252,7 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
                   }
               d="M0.6,-59.997A60,60,0,0,1,56.068,-21.363L0,0Z"
               data-is-focusable={true}
-              id="_Pie_20first20000"
+              id="_Pie_25first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -1294,7 +1294,7 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
                   }
               d="M56.484,-20.237A60,60,0,0,1,-24.404,54.813L0,0Z"
               data-is-focusable={true}
-              id="_Pie_20second39000"
+              id="_Pie_25second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -1336,7 +1336,7 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
                   }
               d="M-25.495,54.314A60,60,0,0,1,-0.6,-59.997L0,0Z"
               data-is-focusable={true}
-              id="_Pie_20third45000"
+              id="_Pie_25third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -1415,7 +1415,7 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone22"
+              data-focuszone-id="FocusZone28"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1736,7 +1736,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone25"
+    data-focuszone-id="FocusZone32"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1774,7 +1774,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
                   }
               d="M0.6,-59.997A60,60,0,0,1,56.068,-21.363L0,0Z"
               data-is-focusable={true}
-              id="_Pie_24first20000"
+              id="_Pie_30first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -1816,7 +1816,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
                   }
               d="M56.484,-20.237A60,60,0,0,1,-24.404,54.813L0,0Z"
               data-is-focusable={true}
-              id="_Pie_24second39000"
+              id="_Pie_30second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -1858,7 +1858,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
                   }
               d="M-25.495,54.314A60,60,0,0,1,-0.6,-59.997L0,0Z"
               data-is-focusable={true}
-              id="_Pie_24third45000"
+              id="_Pie_30third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -1937,7 +1937,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone26"
+              data-focuszone-id="FocusZone33"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2258,7 +2258,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone2"
+    data-focuszone-id="FocusZone3"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2411,7 +2411,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone3"
+              data-focuszone-id="FocusZone4"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2732,7 +2732,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone13"
+    data-focuszone-id="FocusZone17"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2770,7 +2770,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
                   }
               d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
               data-is-focusable={true}
-              id="_Pie_12first20000"
+              id="_Pie_15first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -2796,7 +2796,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
                   }
               d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
               data-is-focusable={true}
-              id="_Pie_12second39000"
+              id="_Pie_15second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -2822,7 +2822,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
                   }
               d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
               data-is-focusable={true}
-              id="_Pie_12third45000"
+              id="_Pie_15third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -2885,7 +2885,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone14"
+              data-focuszone-id="FocusZone18"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3206,7 +3206,7 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone8"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3244,7 +3244,7 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
                   }
               d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
               data-is-focusable={true}
-              id="_Pie_5first20000"
+              id="_Pie_6first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3270,7 +3270,7 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
                   }
               d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
               data-is-focusable={true}
-              id="_Pie_5second39000"
+              id="_Pie_6second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3296,7 +3296,7 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
                   }
               d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
               data-is-focusable={true}
-              id="_Pie_5third45000"
+              id="_Pie_6third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3340,7 +3340,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone12"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3378,7 +3378,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
                   }
               d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
               data-is-focusable={true}
-              id="_Pie_8first20000"
+              id="_Pie_10first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3404,7 +3404,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
                   }
               d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
               data-is-focusable={true}
-              id="_Pie_8second39000"
+              id="_Pie_10second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3430,7 +3430,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
                   }
               d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
               data-is-focusable={true}
-              id="_Pie_8third45000"
+              id="_Pie_10third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3493,7 +3493,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone10"
+              data-focuszone-id="FocusZone13"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3814,7 +3814,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone17"
+    data-focuszone-id="FocusZone22"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3852,7 +3852,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
                   }
               d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
               data-is-focusable={true}
-              id="_Pie_16first20000"
+              id="_Pie_20first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3878,7 +3878,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
                   }
               d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
               data-is-focusable={true}
-              id="_Pie_16second39000"
+              id="_Pie_20second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3904,7 +3904,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
                   }
               d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
               data-is-focusable={true}
-              id="_Pie_16third45000"
+              id="_Pie_20third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3985,7 +3985,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone18"
+              data-focuszone-id="FocusZone23"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
index df446ed4c626b..551ad53f5f2a7 100644
--- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
+++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
@@ -1,630 +1,577 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DonutChart - mouse events Should render callout correctly on mouseover 1`] = `
-<div
-  className=
-      ms-DonutChart
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: 100%;
-        width: 100%;
-      }
-  onMouseLeave={[Function]}
->
-  <div
-    className=
-        ms-FocusZone
-        &:focus {
-          outline: none;
-        }
-    data-focuszone-id="FocusZone2"
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onMouseDownCapture={[Function]}
-  >
-    <div>
-      <svg
-        aria-label="Stacked Bar chart example"
-        className=
-
-            {
-              alignment-adjust: center;
-              box-sizing: content-box;
-              display: block;
-              height: -40px;
-              overflow: visible;
-              width: 0px;
-            }
-      >
-        <g
-          transform="translate(0, -20)"
-        >
-          <g>
-            <path
-              aria-label="2020/04/30, 20000."
-              className=
-
-                  {
-                    cursor: default;
-                    fill: #E5E5E5;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
-              data-is-focusable={true}
-              id="_Pie_1first20000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/20, 39000."
-              className=
-
-                  {
-                    cursor: default;
-                    fill: #0078D4;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
-              data-is-focusable={true}
-              id="_Pie_1second39000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/25, 45000."
-              className=
-
-                  {
-                    cursor: default;
-                    fill: #DADADA;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
-              data-is-focusable={true}
-              id="_Pie_1third45000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
-          </g>
-        </g>
-      </svg>
-    </div>
-  </div>
+exports[`Donut chart interactions Should hide callout on mouse leave 1`] = `
+<div>
   <div
-    className=
-        ms-Callout-container
+    class=
+        ms-DonutChart
         {
-          position: relative;
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          align-items: center;
+          display: flex;
+          flex-direction: column;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: 100%;
+          width: 100%;
         }
   >
     <div
-      className=
-          ms-Callout
-          {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
-            border-radius: 2px;
-            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
-            box-sizing: border-box;
-            display: flex;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
-            font-weight: 400;
-            outline: transparent;
-            position: absolute;
-            z-index: 1000000;
-          }
-          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-            border-color: WindowText;
-            border-style: solid;
-            border-width: 1px;
-          }
-          &::-moz-focus-inner {
-            border: 0px;
+      class=
+          ms-FocusZone
+          &:focus {
+            outline: none;
           }
-      data-is-focusable={false}
-      hidden={false}
-      id="callout0"
-      style={
-        Object {
-          "filter": "opacity(0)",
-          "opacity": 0,
-          "pointerEvents": "none",
-        }
-      }
-      tabIndex={-1}
+      data-focuszone-id="FocusZone3"
     >
-      <div
-        className=
-            ms-Callout-main
-            {
-              background-color: #ffffff;
-              border-radius: 2px;
-              overflow-x: hidden;
-              overflow-y: auto;
-              position: relative;
-              width: 100%;
-            }
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        role="text"
-        style={
-          Object {
-            "maxHeight": "100%",
-            "outline": "none",
-            "overflowY": undefined,
-          }
-        }
-      >
-        <div
-          className=
+      <div>
+        <svg
+          aria-label="Stacked Bar chart example"
+          class=
 
               {
-                background-blend-mode: normal, luminosity;
-                background-color: #ffffff;
-                display: grid;
-                overflow: hidden;
-                padding-bottom: 10px;
-                padding-left: 16px;
-                padding-right: 16px;
-                padding-top: 11px;
+                alignment-adjust: center;
+                box-sizing: content-box;
+                display: block;
+                height: -40px;
+                overflow: visible;
+                width: 0px;
               }
+          focusable="false"
+          viewBox="0 0 0 0"
         >
-          <div
-            className=
-
-                {
-                  display: flex;
-                  flex-direction: row;
-                  justify-content: space-between;
-                }
+          <g
+            transform="translate(0, -20)"
           >
-            <div
-              className=
+            <g>
+              <path
+                aria-label="2020/04/30, 20000."
+                class=
 
-                  {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    color: #605e5c;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 12px;
-                    font-weight: 400;
-                    line-height: 16px;
-                    opacity: 0.8;
-                  }
-            >
-               
-            </div>
-          </div>
+                    {
+                      cursor: default;
+                      fill: #E5E5E5;
+                      outline: transparent;
+                      stroke: #ffffff;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
+                data-is-focusable="true"
+                id="_Pie_1first20000"
+                opacity="1"
+                role="img"
+                tabindex="0"
+              />
+            </g>
+            <g>
+              <path
+                aria-label="2020/04/20, 39000."
+                class=
+
+                    {
+                      cursor: default;
+                      fill: #0078D4;
+                      outline: transparent;
+                      stroke: #ffffff;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
+                data-is-focusable="true"
+                id="_Pie_1second39000"
+                opacity="1"
+                role="img"
+                tabindex="-1"
+              />
+            </g>
+            <g>
+              <path
+                aria-label="2020/04/25, 45000."
+                class=
+
+                    {
+                      cursor: default;
+                      fill: #DADADA;
+                      outline: transparent;
+                      stroke: #ffffff;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
+                data-is-focusable="true"
+                id="_Pie_1third45000"
+                opacity="1"
+                role="img"
+                tabindex="-1"
+              />
+            </g>
+          </g>
+        </svg>
+      </div>
+    </div>
+    <div
+      class=
+          ms-Callout-container
+          {
+            position: relative;
+          }
+      style="visibility: hidden;"
+    >
+      <div
+        class=
+            ms-Callout
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              border-radius: 2px;
+              box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+              box-sizing: border-box;
+              display: flex;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 14px;
+              font-weight: 400;
+              outline: transparent;
+              position: absolute;
+              z-index: 1000000;
+            }
+            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+              border-color: WindowText;
+              border-style: solid;
+              border-width: 1px;
+            }
+            &::-moz-focus-inner {
+              border: 0px;
+            }
+        data-is-focusable="false"
+        hidden=""
+        id="callout0"
+        style="opacity: 0; filter: opacity(0); pointer-events: none;"
+        tabindex="-1"
+      >
+        <div
+          class=
+              ms-Callout-main
+              {
+                background-color: #ffffff;
+                border-radius: 2px;
+                overflow-x: hidden;
+                overflow-y: auto;
+                position: relative;
+                width: 100%;
+              }
+          role="text"
+          style="outline: none; max-height: 100%;"
+        >
           <div
-            className=""
+            class=
+
+                {
+                  background-blend-mode: normal, luminosity;
+                  background-color: #ffffff;
+                  display: grid;
+                  overflow: hidden;
+                  padding-bottom: 10px;
+                  padding-left: 16px;
+                  padding-right: 16px;
+                  padding-top: 11px;
+                }
           >
             <div
-              className=
+              class=
 
                   {
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    border-left: 4px solid #E5E5E5;
-                    color: #323130;
-                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                    font-size: 28px;
-                    font-weight: 600;
-                    line-height: 22px;
-                    margin-top: unset;
-                    padding-left: 8px;
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-between;
                   }
             >
               <div
-                className=
+                class=
 
                     {
                       -moz-osx-font-smoothing: grayscale;
                       -webkit-font-smoothing: antialiased;
-                      color: #323130;
+                      color: #605e5c;
                       font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                       font-size: 12px;
                       font-weight: 400;
                       line-height: 16px;
+                      opacity: 0.8;
                     }
               >
-                2020/04/30
+                 
               </div>
+            </div>
+            <div
+              class=""
+            >
               <div
-                className=
+                class=
 
                     {
                       -moz-osx-font-smoothing: grayscale;
                       -webkit-font-smoothing: antialiased;
-                      color: #E5E5E5;
+                      border-left: 4px solid #E5E5E5;
+                      color: #323130;
                       font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                       font-size: 28px;
-                      font-weight: bold;
-                      line-height: 36px;
+                      font-weight: 600;
+                      line-height: 22px;
+                      margin-top: unset;
+                      padding-left: 8px;
                     }
               >
-                20,000
+                <div
+                  class=
+
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        color: #323130;
+                        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                        font-size: 12px;
+                        font-weight: 400;
+                        line-height: 16px;
+                      }
+                >
+                  2020/04/30
+                </div>
+                <div
+                  class=
+
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        color: #E5E5E5;
+                        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                        font-size: 28px;
+                        font-weight: bold;
+                        line-height: 36px;
+                      }
+                >
+                  20,000
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    className=
-
-        {
-          padding-top: 16px;
-          width: 0px;
-        }
-  >
     <div
-      className=
+      class=
 
           {
-            align-items: center;
-            margin-bottom: 0;
-            margin-left: -8px;
-            margin-right: 0;
-            margin-top: -8px;
-            white-space: nowrap;
-            width: 100%;
+            padding-top: 16px;
+            width: 0px;
           }
     >
-      <div>
-        <div
-          style={
-            Object {
-              "position": "relative",
+      <div
+        class=
+
+            {
+              align-items: center;
+              margin-bottom: 0;
+              margin-left: -8px;
+              margin-right: 0;
+              margin-top: -8px;
+              white-space: nowrap;
+              width: 100%;
             }
-          }
-        >
+      >
+        <div>
           <div
-            data-automation-id="visibleContent"
-            style={
-              Object {
-                "position": "fixed",
-                "visibility": "hidden",
-              }
-            }
+            style="position: relative;"
           >
             <div
-              aria-label="Legends"
-              aria-multiselectable={false}
-              className=
-                  ms-FocusZone
-                  &:focus {
-                    outline: none;
-                  }
-              data-focuszone-id="FocusZone3"
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onMouseDownCapture={[Function]}
-              role="listbox"
+              data-automation-id="visibleContent"
+              style="position: fixed; visibility: hidden;"
             >
               <div
-                className=
-                    ms-OverflowSet
-                    {
-                      display: flex;
-                      flex-wrap: wrap;
-                      justify-content: center;
-                      position: relative;
+                aria-label="Legends"
+                aria-multiselectable="false"
+                class=
+                    ms-FocusZone
+                    &:focus {
+                      outline: none;
                     }
-                role="group"
+                data-focuszone-id="FocusZone4"
+                role="listbox"
               >
                 <div
-                  className=
-                      ms-OverflowSet-item
+                  class=
+                      ms-OverflowSet
                       {
-                        display: inherit;
-                        flex-shrink: 0;
+                        display: flex;
+                        flex-wrap: wrap;
+                        justify-content: center;
+                        position: relative;
                       }
-                  key="0"
-                  role="none"
+                  role="group"
                 >
-                  <button
-                    aria-label="first"
-                    aria-posinset={1}
-                    aria-selected={false}
-                    aria-setsize={3}
-                    className=
-
+                  <div
+                    class=
+                        ms-OverflowSet-item
                         {
-                          align-items: center;
-                          background: none;
-                          border: none;
-                          cursor: pointer;
-                          display: flex;
-                          outline: transparent;
-                          padding-bottom: 8px;
-                          padding-left: 8px;
-                          padding-right: 8px;
-                          padding-top: 8px;
-                          position: relative;
-                          text-transform: capitalize;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 1px;
-                          content: "";
-                          left: 1px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 1px;
-                          top: 1px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          outline-color: #605e5c;
+                          display: inherit;
+                          flex-shrink: 0;
                         }
-                    data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
+                    role="none"
                   >
-                    <div
-                      className=
+                    <button
+                      aria-label="first"
+                      aria-posinset="1"
+                      aria-selected="false"
+                      aria-setsize="3"
+                      class=
 
                           {
-                            background-color: #E5E5E5;
-                            border-color: #E5E5E5;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
+                            align-items: center;
+                            background: none;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            outline: transparent;
+                            padding-bottom: 8px;
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            padding-top: 8px;
+                            position: relative;
+                            text-transform: capitalize;
                           }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #E5E5E5, #E5E5E5);
-                            opacity: ;
+                          &::-moz-focus-inner {
+                            border: 0;
                           }
-                    />
-                    <div
-                      className=
-
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
+                          .ms-Fabric--isFocusVisible &:focus:after {
+                            border: 1px solid transparent;
+                            bottom: 1px;
+                            content: "";
+                            left: 1px;
+                            outline: 1px solid #605e5c;
+                            position: absolute;
+                            right: 1px;
+                            top: 1px;
+                            z-index: 1;
                           }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                            outline-color: #605e5c;
+                          }
+                      data-is-focusable="true"
+                      role="option"
+                      tabindex="0"
                     >
-                      first
-                    </div>
-                  </button>
-                </div>
-                <div
-                  className=
-                      ms-OverflowSet-item
-                      {
-                        display: inherit;
-                        flex-shrink: 0;
-                      }
-                  key="1"
-                  role="none"
-                >
-                  <button
-                    aria-label="second"
-                    aria-posinset={2}
-                    aria-selected={false}
-                    aria-setsize={3}
-                    className=
+                      <div
+                        class=
 
+                            {
+                              background-color: #E5E5E5;
+                              border-color: #E5E5E5;
+                              border: 1px solid;
+                              content: ;
+                              height: 12px;
+                              margin-right: 8px;
+                              width: 12px;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                              content: linear-gradient(to right, #E5E5E5, #E5E5E5);
+                              opacity: ;
+                            }
+                      />
+                      <div
+                        class=
+
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              color: #323130;
+                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                              font-size: 12px;
+                              font-weight: 400;
+                              line-height: 16px;
+                              opacity: ;
+                            }
+                      >
+                        first
+                      </div>
+                    </button>
+                  </div>
+                  <div
+                    class=
+                        ms-OverflowSet-item
                         {
-                          align-items: center;
-                          background: none;
-                          border: none;
-                          cursor: pointer;
-                          display: flex;
-                          outline: transparent;
-                          padding-bottom: 8px;
-                          padding-left: 8px;
-                          padding-right: 8px;
-                          padding-top: 8px;
-                          position: relative;
-                          text-transform: capitalize;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 1px;
-                          content: "";
-                          left: 1px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 1px;
-                          top: 1px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          outline-color: #605e5c;
+                          display: inherit;
+                          flex-shrink: 0;
                         }
-                    data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
+                    role="none"
                   >
-                    <div
-                      className=
+                    <button
+                      aria-label="second"
+                      aria-posinset="2"
+                      aria-selected="false"
+                      aria-setsize="3"
+                      class=
 
                           {
-                            background-color: #0078D4;
-                            border-color: #0078D4;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
-                          }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #0078D4, #0078D4);
-                            opacity: ;
-                          }
-                    />
-                    <div
-                      className=
-
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
+                            align-items: center;
+                            background: none;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            outline: transparent;
+                            padding-bottom: 8px;
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            padding-top: 8px;
+                            position: relative;
+                            text-transform: capitalize;
+                          }
+                          &::-moz-focus-inner {
+                            border: 0;
+                          }
+                          .ms-Fabric--isFocusVisible &:focus:after {
+                            border: 1px solid transparent;
+                            bottom: 1px;
+                            content: "";
+                            left: 1px;
+                            outline: 1px solid #605e5c;
+                            position: absolute;
+                            right: 1px;
+                            top: 1px;
+                            z-index: 1;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                            outline-color: #605e5c;
                           }
+                      data-is-focusable="true"
+                      role="option"
+                      tabindex="-1"
                     >
-                      second
-                    </div>
-                  </button>
-                </div>
-                <div
-                  className=
-                      ms-OverflowSet-item
-                      {
-                        display: inherit;
-                        flex-shrink: 0;
-                      }
-                  key="2"
-                  role="none"
-                >
-                  <button
-                    aria-label="third"
-                    aria-posinset={3}
-                    aria-selected={false}
-                    aria-setsize={3}
-                    className=
+                      <div
+                        class=
+
+                            {
+                              background-color: #0078D4;
+                              border-color: #0078D4;
+                              border: 1px solid;
+                              content: ;
+                              height: 12px;
+                              margin-right: 8px;
+                              width: 12px;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                              content: linear-gradient(to right, #0078D4, #0078D4);
+                              opacity: ;
+                            }
+                      />
+                      <div
+                        class=
 
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              color: #323130;
+                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                              font-size: 12px;
+                              font-weight: 400;
+                              line-height: 16px;
+                              opacity: ;
+                            }
+                      >
+                        second
+                      </div>
+                    </button>
+                  </div>
+                  <div
+                    class=
+                        ms-OverflowSet-item
                         {
-                          align-items: center;
-                          background: none;
-                          border: none;
-                          cursor: pointer;
-                          display: flex;
-                          outline: transparent;
-                          padding-bottom: 8px;
-                          padding-left: 8px;
-                          padding-right: 8px;
-                          padding-top: 8px;
-                          position: relative;
-                          text-transform: capitalize;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 1px;
-                          content: "";
-                          left: 1px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 1px;
-                          top: 1px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          outline-color: #605e5c;
+                          display: inherit;
+                          flex-shrink: 0;
                         }
-                    data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
+                    role="none"
                   >
-                    <div
-                      className=
+                    <button
+                      aria-label="third"
+                      aria-posinset="3"
+                      aria-selected="false"
+                      aria-setsize="3"
+                      class=
 
                           {
-                            background-color: #DADADA;
-                            border-color: #DADADA;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
+                            align-items: center;
+                            background: none;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            outline: transparent;
+                            padding-bottom: 8px;
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            padding-top: 8px;
+                            position: relative;
+                            text-transform: capitalize;
                           }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #DADADA, #DADADA);
-                            opacity: ;
+                          &::-moz-focus-inner {
+                            border: 0;
                           }
-                    />
-                    <div
-                      className=
-
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
+                          .ms-Fabric--isFocusVisible &:focus:after {
+                            border: 1px solid transparent;
+                            bottom: 1px;
+                            content: "";
+                            left: 1px;
+                            outline: 1px solid #605e5c;
+                            position: absolute;
+                            right: 1px;
+                            top: 1px;
+                            z-index: 1;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                            outline-color: #605e5c;
                           }
+                      data-is-focusable="true"
+                      role="option"
+                      tabindex="-1"
                     >
-                      third
-                    </div>
-                  </button>
+                      <div
+                        class=
+
+                            {
+                              background-color: #DADADA;
+                              border-color: #DADADA;
+                              border: 1px solid;
+                              content: ;
+                              height: 12px;
+                              margin-right: 8px;
+                              width: 12px;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                              content: linear-gradient(to right, #DADADA, #DADADA);
+                              opacity: ;
+                            }
+                      />
+                      <div
+                        class=
+
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              color: #323130;
+                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                              font-size: 12px;
+                              font-weight: 400;
+                              line-height: 16px;
+                              opacity: ;
+                            }
+                      >
+                        third
+                      </div>
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
@@ -636,1071 +583,447 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
 </div>
 `;
 
-exports[`DonutChart - mouse events Should render customized callout on mouseover 1`] = `
-<div
-  className=
-      ms-DonutChart
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: 100%;
-        width: 100%;
-      }
-  onMouseLeave={[Function]}
->
+exports[`Donut chart interactions Should reflect theme change 1`] = `
+<div>
   <div
-    className=
-        ms-FocusZone
-        &:focus {
-          outline: none;
-        }
-    data-focuszone-id="FocusZone2"
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onMouseDownCapture={[Function]}
-  >
-    <div>
-      <svg
-        aria-label="Stacked Bar chart example"
-        className=
-
-            {
-              alignment-adjust: center;
-              box-sizing: content-box;
-              display: block;
-              height: -40px;
-              overflow: visible;
-              width: 0px;
-            }
-      >
-        <g
-          transform="translate(0, -20)"
-        >
-          <g>
-            <path
-              aria-label="2020/04/30, 20000."
-              className=
-
-                  {
-                    cursor: default;
-                    fill: #E5E5E5;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
-              data-is-focusable={true}
-              id="_Pie_1first20000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/20, 39000."
-              className=
-
-                  {
-                    cursor: default;
-                    fill: #0078D4;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
-              data-is-focusable={true}
-              id="_Pie_1second39000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/25, 45000."
-              className=
+    class=
 
-                  {
-                    cursor: default;
-                    fill: #DADADA;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
-              data-is-focusable={true}
-              id="_Pie_1third45000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
-          </g>
-        </g>
-      </svg>
-    </div>
-  </div>
-  <div
-    className=
-        ms-Callout-container
         {
-          position: relative;
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          background: #1b1a19;
+          color: #f3f2f1;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
         }
   >
     <div
-      className=
-          ms-Callout
+      class=
+          ms-DonutChart
           {
             -moz-osx-font-smoothing: grayscale;
             -webkit-font-smoothing: antialiased;
-            border-radius: 2px;
-            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
-            box-sizing: border-box;
+            align-items: center;
             display: flex;
+            flex-direction: column;
             font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
             font-size: 14px;
             font-weight: 400;
-            outline: transparent;
-            position: absolute;
-            z-index: 1000000;
-          }
-          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-            border-color: WindowText;
-            border-style: solid;
-            border-width: 1px;
-          }
-          &::-moz-focus-inner {
-            border: 0px;
+            height: 100%;
+            width: 100%;
           }
-      data-is-focusable={false}
-      hidden={false}
-      id="callout0"
-      style={
-        Object {
-          "filter": "opacity(0)",
-          "opacity": 0,
-          "pointerEvents": "none",
-        }
-      }
-      tabIndex={-1}
     >
       <div
-        className=
-            ms-Callout-main
-            {
-              background-color: #ffffff;
-              border-radius: 2px;
-              overflow-x: hidden;
-              overflow-y: auto;
-              position: relative;
-              width: 100%;
+        class=
+            ms-FocusZone
+            &:focus {
+              outline: none;
             }
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        role="text"
-        style={
-          Object {
-            "maxHeight": "100%",
-            "outline": "none",
-            "overflowY": undefined,
-          }
-        }
+        data-focuszone-id="FocusZone6"
       >
         <div>
-          <pre>
-            {
-  "legend": "first",
-  "data": 20000,
-  "color": "#E5E5E5",
-  "xAxisCalloutData": "2020/04/30"
-}
-          </pre>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    className=
-
-        {
-          padding-top: 16px;
-          width: 0px;
-        }
-  >
-    <div
-      className=
+          <svg
+            aria-label="Stacked Bar chart example"
+            class=
 
-          {
-            align-items: center;
-            margin-bottom: 0;
-            margin-left: -8px;
-            margin-right: 0;
-            margin-top: -8px;
-            white-space: nowrap;
-            width: 100%;
-          }
-    >
-      <div>
-        <div
-          style={
-            Object {
-              "position": "relative",
-            }
-          }
-        >
-          <div
-            data-automation-id="visibleContent"
-            style={
-              Object {
-                "position": "fixed",
-                "visibility": "hidden",
-              }
-            }
+                {
+                  alignment-adjust: center;
+                  box-sizing: content-box;
+                  display: block;
+                  height: -40px;
+                  overflow: visible;
+                  width: 0px;
+                }
+            focusable="false"
+            viewBox="0 0 0 0"
           >
-            <div
-              aria-label="Legends"
-              aria-multiselectable={false}
-              className=
-                  ms-FocusZone
-                  &:focus {
-                    outline: none;
-                  }
-              data-focuszone-id="FocusZone3"
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onMouseDownCapture={[Function]}
-              role="listbox"
+            <g
+              transform="translate(0, -20)"
             >
-              <div
-                className=
-                    ms-OverflowSet
-                    {
-                      display: flex;
-                      flex-wrap: wrap;
-                      justify-content: center;
-                      position: relative;
-                    }
-                role="group"
-              >
-                <div
-                  className=
-                      ms-OverflowSet-item
+              <g>
+                <path
+                  aria-label="2020/04/30, 20000."
+                  class=
+
                       {
-                        display: inherit;
-                        flex-shrink: 0;
+                        cursor: default;
+                        fill: #E5E5E5;
+                        outline: transparent;
+                        stroke: #ffffff;
                       }
-                  key="0"
-                  role="none"
-                >
-                  <button
-                    aria-label="first"
-                    aria-posinset={1}
-                    aria-selected={false}
-                    aria-setsize={3}
-                    className=
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                  d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
+                  data-is-focusable="true"
+                  id="_Pie_4first20000"
+                  opacity="1"
+                  role="img"
+                  tabindex="0"
+                />
+              </g>
+              <g>
+                <path
+                  aria-label="2020/04/20, 39000."
+                  class=
 
-                        {
-                          align-items: center;
-                          background: none;
-                          border: none;
-                          cursor: pointer;
-                          display: flex;
-                          outline: transparent;
-                          padding-bottom: 8px;
-                          padding-left: 8px;
-                          padding-right: 8px;
-                          padding-top: 8px;
-                          position: relative;
-                          text-transform: capitalize;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 1px;
-                          content: "";
-                          left: 1px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 1px;
-                          top: 1px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          outline-color: #605e5c;
-                        }
-                    data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
-                  >
-                    <div
-                      className=
+                      {
+                        cursor: default;
+                        fill: #0078D4;
+                        outline: transparent;
+                        stroke: #ffffff;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                  d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
+                  data-is-focusable="true"
+                  id="_Pie_4second39000"
+                  opacity="1"
+                  role="img"
+                  tabindex="-1"
+                />
+              </g>
+              <g>
+                <path
+                  aria-label="2020/04/25, 45000."
+                  class=
 
-                          {
-                            background-color: #E5E5E5;
-                            border-color: #E5E5E5;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
-                          }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #E5E5E5, #E5E5E5);
-                            opacity: ;
-                          }
-                    />
-                    <div
-                      className=
+                      {
+                        cursor: default;
+                        fill: #DADADA;
+                        outline: transparent;
+                        stroke: #ffffff;
+                      }
+                      &::-moz-focus-inner {
+                        border: 0;
+                      }
+                  d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
+                  data-is-focusable="true"
+                  id="_Pie_4third45000"
+                  opacity="1"
+                  role="img"
+                  tabindex="-1"
+                />
+              </g>
+            </g>
+          </svg>
+        </div>
+      </div>
+      <span
+        class="ms-layer"
+      />
+      <div
+        class=
 
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
-                          }
-                    >
-                      first
-                    </div>
-                  </button>
-                </div>
+            {
+              padding-top: 16px;
+              width: 0px;
+            }
+      >
+        <div
+          class=
+
+              {
+                align-items: center;
+                margin-bottom: 0;
+                margin-left: -8px;
+                margin-right: 0;
+                margin-top: -8px;
+                white-space: nowrap;
+                width: 100%;
+              }
+        >
+          <div>
+            <div
+              style="position: relative;"
+            >
+              <div
+                data-automation-id="visibleContent"
+                style="position: fixed; visibility: hidden;"
+              >
                 <div
-                  className=
-                      ms-OverflowSet-item
-                      {
-                        display: inherit;
-                        flex-shrink: 0;
+                  aria-label="Legends"
+                  aria-multiselectable="false"
+                  class=
+                      ms-FocusZone
+                      &:focus {
+                        outline: none;
                       }
-                  key="1"
-                  role="none"
+                  data-focuszone-id="FocusZone7"
+                  role="listbox"
                 >
-                  <button
-                    aria-label="second"
-                    aria-posinset={2}
-                    aria-selected={false}
-                    aria-setsize={3}
-                    className=
-
+                  <div
+                    class=
+                        ms-OverflowSet
                         {
-                          align-items: center;
-                          background: none;
-                          border: none;
-                          cursor: pointer;
                           display: flex;
-                          outline: transparent;
-                          padding-bottom: 8px;
-                          padding-left: 8px;
-                          padding-right: 8px;
-                          padding-top: 8px;
+                          flex-wrap: wrap;
+                          justify-content: center;
                           position: relative;
-                          text-transform: capitalize;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 1px;
-                          content: "";
-                          left: 1px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 1px;
-                          top: 1px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          outline-color: #605e5c;
                         }
-                    data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
+                    role="group"
                   >
                     <div
-                      className=
-
+                      class=
+                          ms-OverflowSet-item
                           {
-                            background-color: #0078D4;
-                            border-color: #0078D4;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
-                          }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #0078D4, #0078D4);
-                            opacity: ;
-                          }
-                    />
-                    <div
-                      className=
-
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
-                          }
-                    >
-                      second
-                    </div>
-                  </button>
-                </div>
-                <div
-                  className=
-                      ms-OverflowSet-item
-                      {
-                        display: inherit;
-                        flex-shrink: 0;
-                      }
-                  key="2"
-                  role="none"
-                >
-                  <button
-                    aria-label="third"
-                    aria-posinset={3}
-                    aria-selected={false}
-                    aria-setsize={3}
-                    className=
-
-                        {
-                          align-items: center;
-                          background: none;
-                          border: none;
-                          cursor: pointer;
-                          display: flex;
-                          outline: transparent;
-                          padding-bottom: 8px;
-                          padding-left: 8px;
-                          padding-right: 8px;
-                          padding-top: 8px;
-                          position: relative;
-                          text-transform: capitalize;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 1px;
-                          content: "";
-                          left: 1px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 1px;
-                          top: 1px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          outline-color: #605e5c;
-                        }
-                    data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
-                  >
-                    <div
-                      className=
-
-                          {
-                            background-color: #DADADA;
-                            border-color: #DADADA;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
-                          }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #DADADA, #DADADA);
-                            opacity: ;
-                          }
-                    />
-                    <div
-                      className=
-
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
-                          }
-                    >
-                      third
-                    </div>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`DonutChart snapShot testing Should render arc labels 1`] = `
-<div
-  className=
-      ms-DonutChart
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: 100%;
-        width: 100%;
-      }
-  onMouseLeave={[Function]}
->
-  <div
-    className=
-        ms-FocusZone
-        &:focus {
-          outline: none;
-        }
-    data-focuszone-id="FocusZone21"
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onMouseDownCapture={[Function]}
-  >
-    <div>
-      <svg
-        aria-label="Stacked Bar chart example"
-        className=
-
-            {
-              alignment-adjust: center;
-              box-sizing: content-box;
-              display: block;
-              height: 200px;
-              overflow: visible;
-              width: 200px;
-            }
-      >
-        <g
-          transform="translate(100, 100)"
-        >
-          <g>
-            <path
-              aria-label="2020/04/30, 20000."
-              className=
-
-                  {
-                    cursor: default;
-                    fill: #E5E5E5;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M0.6,-59.997A60,60,0,0,1,56.068,-21.363L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_20first20000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
-            <text
-              aria-hidden={true}
-              className=
-
-                  {
-                    fill: #323130;
-                    font-size: 12px;
-                    font-weight: 600;
-                  }
-              dominantBaseline="auto"
-              textAnchor="start"
-              x={35.43557344375781}
-              y={-50.87553571916512}
-            >
-              20.0k
-            </text>
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/20, 39000."
-              className=
-
-                  {
-                    cursor: default;
-                    fill: #0078D4;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M56.484,-20.237A60,60,0,0,1,-24.404,54.813L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_20second39000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
-            <text
-              aria-hidden={true}
-              className=
-
-                  {
-                    fill: #323130;
-                    font-size: 12px;
-                    font-weight: 600;
-                  }
-              dominantBaseline="hanging"
-              textAnchor="start"
-              x={42.16983494620299}
-              y={45.45002772947447}
-            >
-              39.0k
-            </text>
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/25, 45000."
-              className=
-
-                  {
-                    cursor: default;
-                    fill: #DADADA;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M-25.495,54.314A60,60,0,0,1,-0.6,-59.997L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_20third45000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
-            <text
-              aria-hidden={true}
-              className=
-
-                  {
-                    fill: #323130;
-                    font-size: 12px;
-                    font-weight: 600;
-                  }
-              dominantBaseline="auto"
-              textAnchor="end"
-              x={-60.58001193073337}
-              y={-13.19326170710649}
-            >
-              45.0k
-            </text>
-          </g>
-        </g>
-      </svg>
-    </div>
-  </div>
-  <span
-    className="ms-layer"
-  />
-  <div
-    className=
-
-        {
-          padding-top: 16px;
-          width: 200px;
-        }
-  >
-    <div
-      className=
-
-          {
-            align-items: center;
-            margin-bottom: 0;
-            margin-left: -8px;
-            margin-right: 0;
-            margin-top: -8px;
-            white-space: nowrap;
-            width: 100%;
-          }
-    >
-      <div>
-        <div
-          style={
-            Object {
-              "position": "relative",
-            }
-          }
-        >
-          <div
-            data-automation-id="visibleContent"
-            style={
-              Object {
-                "position": "fixed",
-                "visibility": "hidden",
-              }
-            }
-          >
-            <div
-              aria-label="Legends"
-              aria-multiselectable={false}
-              className=
-                  ms-FocusZone
-                  &:focus {
-                    outline: none;
-                  }
-              data-focuszone-id="FocusZone22"
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onMouseDownCapture={[Function]}
-              role="listbox"
-            >
-              <div
-                className=
-                    ms-OverflowSet
-                    {
-                      display: flex;
-                      flex-wrap: wrap;
-                      justify-content: center;
-                      position: relative;
-                    }
-                role="group"
-              >
-                <div
-                  className=
-                      ms-OverflowSet-item
-                      {
-                        display: inherit;
-                        flex-shrink: 0;
-                      }
-                  role="none"
-                >
-                  <button
-                    aria-label="first"
-                    aria-posinset={1}
-                    aria-selected={false}
-                    aria-setsize={3}
-                    className=
-
-                        {
-                          align-items: center;
-                          background: none;
-                          border: none;
-                          cursor: pointer;
-                          display: flex;
-                          outline: transparent;
-                          padding-bottom: 8px;
-                          padding-left: 8px;
-                          padding-right: 8px;
-                          padding-top: 8px;
-                          position: relative;
-                          text-transform: capitalize;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 1px;
-                          content: "";
-                          left: 1px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 1px;
-                          top: 1px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          outline-color: #605e5c;
-                        }
-                    data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
-                  >
-                    <div
-                      className=
-
-                          {
-                            background-color: #E5E5E5;
-                            border-color: #E5E5E5;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
-                          }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #E5E5E5, #E5E5E5);
-                            opacity: ;
-                          }
-                    />
-                    <div
-                      className=
-
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
+                            display: inherit;
+                            flex-shrink: 0;
                           }
+                      role="none"
                     >
-                      first
-                    </div>
-                  </button>
-                </div>
-                <div
-                  className=
-                      ms-OverflowSet-item
-                      {
-                        display: inherit;
-                        flex-shrink: 0;
-                      }
-                  role="none"
-                >
-                  <button
-                    aria-label="second"
-                    aria-posinset={2}
-                    aria-selected={false}
-                    aria-setsize={3}
-                    className=
-
-                        {
-                          align-items: center;
-                          background: none;
-                          border: none;
-                          cursor: pointer;
-                          display: flex;
-                          outline: transparent;
-                          padding-bottom: 8px;
-                          padding-left: 8px;
-                          padding-right: 8px;
-                          padding-top: 8px;
-                          position: relative;
-                          text-transform: capitalize;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 1px;
-                          content: "";
-                          left: 1px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 1px;
-                          top: 1px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          outline-color: #605e5c;
-                        }
-                    data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
-                  >
-                    <div
-                      className=
+                      <button
+                        aria-label="first"
+                        aria-posinset="1"
+                        aria-selected="false"
+                        aria-setsize="3"
+                        class=
 
-                          {
-                            background-color: #0078D4;
-                            border-color: #0078D4;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
-                          }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #0078D4, #0078D4);
-                            opacity: ;
-                          }
-                    />
-                    <div
-                      className=
+                            {
+                              align-items: center;
+                              background: none;
+                              border: none;
+                              cursor: pointer;
+                              display: flex;
+                              outline: transparent;
+                              padding-bottom: 8px;
+                              padding-left: 8px;
+                              padding-right: 8px;
+                              padding-top: 8px;
+                              position: relative;
+                              text-transform: capitalize;
+                            }
+                            &::-moz-focus-inner {
+                              border: 0;
+                            }
+                            .ms-Fabric--isFocusVisible &:focus:after {
+                              border: 1px solid transparent;
+                              bottom: 1px;
+                              content: "";
+                              left: 1px;
+                              outline: 1px solid #a19f9d;
+                              position: absolute;
+                              right: 1px;
+                              top: 1px;
+                              z-index: 1;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                              outline-color: #a19f9d;
+                            }
+                        data-is-focusable="true"
+                        role="option"
+                        tabindex="0"
+                      >
+                        <div
+                          class=
 
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
-                          }
-                    >
-                      second
-                    </div>
-                  </button>
-                </div>
-                <div
-                  className=
-                      ms-OverflowSet-item
-                      {
-                        display: inherit;
-                        flex-shrink: 0;
-                      }
-                  role="none"
-                >
-                  <button
-                    aria-label="third"
-                    aria-posinset={3}
-                    aria-selected={false}
-                    aria-setsize={3}
-                    className=
+                              {
+                                background-color: #E5E5E5;
+                                border-color: #E5E5E5;
+                                border: 1px solid;
+                                content: ;
+                                height: 12px;
+                                margin-right: 8px;
+                                width: 12px;
+                              }
+                              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                                content: linear-gradient(to right, #E5E5E5, #E5E5E5);
+                                opacity: ;
+                              }
+                        />
+                        <div
+                          class=
 
-                        {
-                          align-items: center;
-                          background: none;
-                          border: none;
-                          cursor: pointer;
-                          display: flex;
-                          outline: transparent;
-                          padding-bottom: 8px;
-                          padding-left: 8px;
-                          padding-right: 8px;
-                          padding-top: 8px;
-                          position: relative;
-                          text-transform: capitalize;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 1px;
-                          content: "";
-                          left: 1px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 1px;
-                          top: 1px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          outline-color: #605e5c;
-                        }
-                    data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
-                  >
+                              {
+                                -moz-osx-font-smoothing: grayscale;
+                                -webkit-font-smoothing: antialiased;
+                                color: #f3f2f1;
+                                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                                font-size: 12px;
+                                font-weight: 400;
+                                line-height: 16px;
+                                opacity: ;
+                              }
+                        >
+                          first
+                        </div>
+                      </button>
+                    </div>
                     <div
-                      className=
-
+                      class=
+                          ms-OverflowSet-item
                           {
-                            background-color: #DADADA;
-                            border-color: #DADADA;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
-                          }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #DADADA, #DADADA);
-                            opacity: ;
+                            display: inherit;
+                            flex-shrink: 0;
                           }
-                    />
-                    <div
-                      className=
+                      role="none"
+                    >
+                      <button
+                        aria-label="second"
+                        aria-posinset="2"
+                        aria-selected="false"
+                        aria-setsize="3"
+                        class=
+
+                            {
+                              align-items: center;
+                              background: none;
+                              border: none;
+                              cursor: pointer;
+                              display: flex;
+                              outline: transparent;
+                              padding-bottom: 8px;
+                              padding-left: 8px;
+                              padding-right: 8px;
+                              padding-top: 8px;
+                              position: relative;
+                              text-transform: capitalize;
+                            }
+                            &::-moz-focus-inner {
+                              border: 0;
+                            }
+                            .ms-Fabric--isFocusVisible &:focus:after {
+                              border: 1px solid transparent;
+                              bottom: 1px;
+                              content: "";
+                              left: 1px;
+                              outline: 1px solid #a19f9d;
+                              position: absolute;
+                              right: 1px;
+                              top: 1px;
+                              z-index: 1;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                              outline-color: #a19f9d;
+                            }
+                        data-is-focusable="true"
+                        role="option"
+                        tabindex="-1"
+                      >
+                        <div
+                          class=
+
+                              {
+                                background-color: #0078D4;
+                                border-color: #0078D4;
+                                border: 1px solid;
+                                content: ;
+                                height: 12px;
+                                margin-right: 8px;
+                                width: 12px;
+                              }
+                              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                                content: linear-gradient(to right, #0078D4, #0078D4);
+                                opacity: ;
+                              }
+                        />
+                        <div
+                          class=
 
+                              {
+                                -moz-osx-font-smoothing: grayscale;
+                                -webkit-font-smoothing: antialiased;
+                                color: #f3f2f1;
+                                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                                font-size: 12px;
+                                font-weight: 400;
+                                line-height: 16px;
+                                opacity: ;
+                              }
+                        >
+                          second
+                        </div>
+                      </button>
+                    </div>
+                    <div
+                      class=
+                          ms-OverflowSet-item
                           {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
+                            display: inherit;
+                            flex-shrink: 0;
                           }
+                      role="none"
                     >
-                      third
+                      <button
+                        aria-label="third"
+                        aria-posinset="3"
+                        aria-selected="false"
+                        aria-setsize="3"
+                        class=
+
+                            {
+                              align-items: center;
+                              background: none;
+                              border: none;
+                              cursor: pointer;
+                              display: flex;
+                              outline: transparent;
+                              padding-bottom: 8px;
+                              padding-left: 8px;
+                              padding-right: 8px;
+                              padding-top: 8px;
+                              position: relative;
+                              text-transform: capitalize;
+                            }
+                            &::-moz-focus-inner {
+                              border: 0;
+                            }
+                            .ms-Fabric--isFocusVisible &:focus:after {
+                              border: 1px solid transparent;
+                              bottom: 1px;
+                              content: "";
+                              left: 1px;
+                              outline: 1px solid #a19f9d;
+                              position: absolute;
+                              right: 1px;
+                              top: 1px;
+                              z-index: 1;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                              outline-color: #a19f9d;
+                            }
+                        data-is-focusable="true"
+                        role="option"
+                        tabindex="-1"
+                      >
+                        <div
+                          class=
+
+                              {
+                                background-color: #DADADA;
+                                border-color: #DADADA;
+                                border: 1px solid;
+                                content: ;
+                                height: 12px;
+                                margin-right: 8px;
+                                width: 12px;
+                              }
+                              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                                content: linear-gradient(to right, #DADADA, #DADADA);
+                                opacity: ;
+                              }
+                        />
+                        <div
+                          class=
+
+                              {
+                                -moz-osx-font-smoothing: grayscale;
+                                -webkit-font-smoothing: antialiased;
+                                color: #f3f2f1;
+                                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                                font-size: 12px;
+                                font-weight: 400;
+                                line-height: 16px;
+                                opacity: ;
+                              }
+                        >
+                          third
+                        </div>
+                      </button>
                     </div>
-                  </button>
+                  </div>
                 </div>
               </div>
             </div>
@@ -1712,7 +1035,7 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
 </div>
 `;
 
-exports[`DonutChart snapShot testing Should render arc labels in percentage format 1`] = `
+exports[`DonutChart - mouse events Should render callout correctly on mouseover 1`] = `
 <div
   className=
       ms-DonutChart
@@ -1736,7 +1059,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone25"
+    data-focuszone-id="FocusZone3"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1750,13 +1073,13 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
               alignment-adjust: center;
               box-sizing: content-box;
               display: block;
-              height: 200px;
+              height: -40px;
               overflow: visible;
-              width: 200px;
+              width: 0px;
             }
       >
         <g
-          transform="translate(100, 100)"
+          transform="translate(0, -20)"
         >
           <g>
             <path
@@ -1772,9 +1095,9 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M0.6,-59.997A60,60,0,0,1,56.068,-21.363L0,0Z"
+              d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
               data-is-focusable={true}
-              id="_Pie_24first20000"
+              id="_Pie_1first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -1783,22 +1106,6 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
               opacity={1}
               role="img"
             />
-            <text
-              aria-hidden={true}
-              className=
-
-                  {
-                    fill: #323130;
-                    font-size: 12px;
-                    font-weight: 600;
-                  }
-              dominantBaseline="auto"
-              textAnchor="start"
-              x={35.43557344375781}
-              y={-50.87553571916512}
-            >
-              19%
-            </text>
           </g>
           <g>
             <path
@@ -1814,33 +1121,17 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M56.484,-20.237A60,60,0,0,1,-24.404,54.813L0,0Z"
+              d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
               data-is-focusable={true}
-              id="_Pie_24second39000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
-            <text
-              aria-hidden={true}
-              className=
-
-                  {
-                    fill: #323130;
-                    font-size: 12px;
-                    font-weight: 600;
-                  }
-              dominantBaseline="hanging"
-              textAnchor="start"
-              x={42.16983494620299}
-              y={45.45002772947447}
-            >
-              38%
-            </text>
+              id="_Pie_1second39000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
           </g>
           <g>
             <path
@@ -1856,9 +1147,9 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M-25.495,54.314A60,60,0,0,1,-0.6,-59.997L0,0Z"
+              d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
               data-is-focusable={true}
-              id="_Pie_24third45000"
+              id="_Pie_1third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -1867,36 +1158,179 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
               opacity={1}
               role="img"
             />
-            <text
-              aria-hidden={true}
+          </g>
+        </g>
+      </svg>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+      data-is-focusable={false}
+      hidden={false}
+      id="callout0"
+      style={
+        Object {
+          "filter": "opacity(0)",
+          "opacity": 0,
+          "pointerEvents": "none",
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="text"
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div
+          className=
+
+              {
+                background-blend-mode: normal, luminosity;
+                background-color: #ffffff;
+                display: grid;
+                overflow: hidden;
+                padding-bottom: 10px;
+                padding-left: 16px;
+                padding-right: 16px;
+                padding-top: 11px;
+              }
+        >
+          <div
+            className=
+
+                {
+                  display: flex;
+                  flex-direction: row;
+                  justify-content: space-between;
+                }
+          >
+            <div
               className=
 
                   {
-                    fill: #323130;
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #605e5c;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                     font-size: 12px;
+                    font-weight: 400;
+                    line-height: 16px;
+                    opacity: 0.8;
+                  }
+            >
+               
+            </div>
+          </div>
+          <div
+            className=""
+          >
+            <div
+              className=
+
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    border-left: 4px solid #E5E5E5;
+                    color: #323130;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 28px;
                     font-weight: 600;
+                    line-height: 22px;
+                    margin-top: unset;
+                    padding-left: 8px;
                   }
-              dominantBaseline="auto"
-              textAnchor="end"
-              x={-60.58001193073337}
-              y={-13.19326170710649}
             >
-              43%
-            </text>
-          </g>
-        </g>
-      </svg>
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                    }
+              >
+                2020/04/30
+              </div>
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #E5E5E5;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 28px;
+                      font-weight: bold;
+                      line-height: 36px;
+                    }
+              >
+                20,000
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
-  <span
-    className="ms-layer"
-  />
   <div
     className=
 
         {
           padding-top: 16px;
-          width: 200px;
+          width: 0px;
         }
   >
     <div
@@ -1937,7 +1371,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone26"
+              data-focuszone-id="FocusZone4"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1961,6 +1395,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -2051,6 +1486,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="1"
                   role="none"
                 >
                   <button
@@ -2141,6 +1577,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="2"
                   role="none"
                 >
                   <button
@@ -2234,7 +1671,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
 </div>
 `;
 
-exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
+exports[`DonutChart - mouse events Should render customized callout on mouseover 1`] = `
 <div
   className=
       ms-DonutChart
@@ -2258,7 +1695,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone2"
+    data-focuszone-id="FocusZone3"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2272,13 +1709,13 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
               alignment-adjust: center;
               box-sizing: content-box;
               display: block;
-              height: 200px;
+              height: -40px;
               overflow: visible;
-              width: 200px;
+              width: 0px;
             }
       >
         <g
-          transform="translate(100, 100)"
+          transform="translate(0, -20)"
         >
           <g>
             <path
@@ -2294,7 +1731,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M1.141,-99.993A100,100,0,0,1,93.397,-35.736L51.182,-20.134A55,55,0,0,0,1.141,-54.988Z"
+              d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
               data-is-focusable={true}
               id="_Pie_1first20000"
               onBlur={[Function]}
@@ -2320,7 +1757,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M94.188,-33.595A100,100,0,0,1,-40.544,91.412L-21.828,50.483A55,55,0,0,0,51.974,-17.993Z"
+              d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
               data-is-focusable={true}
               id="_Pie_1second39000"
               onBlur={[Function]}
@@ -2346,7 +1783,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M-42.619,90.463A100,100,0,0,1,-1.141,-99.993L-1.141,-54.988A55,55,0,0,0,-23.904,49.534Z"
+              d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
               data-is-focusable={true}
               id="_Pie_1third45000"
               onBlur={[Function]}
@@ -2362,15 +1799,92 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
       </svg>
     </div>
   </div>
-  <span
-    className="ms-layer"
-  />
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+      data-is-focusable={false}
+      hidden={false}
+      id="callout0"
+      style={
+        Object {
+          "filter": "opacity(0)",
+          "opacity": 0,
+          "pointerEvents": "none",
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="text"
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div>
+          <pre>
+            {
+  "legend": "first",
+  "data": 20000,
+  "color": "#E5E5E5",
+  "xAxisCalloutData": "2020/04/30"
+}
+          </pre>
+        </div>
+      </div>
+    </div>
+  </div>
   <div
     className=
 
         {
           padding-top: 16px;
-          width: 200px;
+          width: 0px;
         }
   >
     <div
@@ -2411,7 +1925,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone3"
+              data-focuszone-id="FocusZone4"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2435,6 +1949,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -2525,6 +2040,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="1"
                   role="none"
                 >
                   <button
@@ -2615,6 +2131,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="2"
                   role="none"
                 >
                   <button
@@ -2708,7 +2225,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
 </div>
 `;
 
-exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1`] = `
+exports[`DonutChart snapShot testing Should render arc labels 1`] = `
 <div
   className=
       ms-DonutChart
@@ -2732,7 +2249,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone13"
+    data-focuszone-id="FocusZone27"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2768,9 +2285,9 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+              d="M0.6,-59.997A60,60,0,0,1,56.068,-21.363L0,0Z"
               data-is-focusable={true}
-              id="_Pie_12first20000"
+              id="_Pie_25first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -2779,6 +2296,22 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
               opacity={1}
               role="img"
             />
+            <text
+              aria-hidden={true}
+              className=
+
+                  {
+                    fill: #323130;
+                    font-size: 12px;
+                    font-weight: 600;
+                  }
+              dominantBaseline="auto"
+              textAnchor="start"
+              x={35.43557344375781}
+              y={-50.87553571916512}
+            >
+              20.0k
+            </text>
           </g>
           <g>
             <path
@@ -2794,9 +2327,9 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+              d="M56.484,-20.237A60,60,0,0,1,-24.404,54.813L0,0Z"
               data-is-focusable={true}
-              id="_Pie_12second39000"
+              id="_Pie_25second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -2805,6 +2338,22 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
               opacity={1}
               role="img"
             />
+            <text
+              aria-hidden={true}
+              className=
+
+                  {
+                    fill: #323130;
+                    font-size: 12px;
+                    font-weight: 600;
+                  }
+              dominantBaseline="hanging"
+              textAnchor="start"
+              x={42.16983494620299}
+              y={45.45002772947447}
+            >
+              39.0k
+            </text>
           </g>
           <g>
             <path
@@ -2820,9 +2369,9 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+              d="M-25.495,54.314A60,60,0,0,1,-0.6,-59.997L0,0Z"
               data-is-focusable={true}
-              id="_Pie_12third45000"
+              id="_Pie_25third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -2831,6 +2380,22 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
               opacity={1}
               role="img"
             />
+            <text
+              aria-hidden={true}
+              className=
+
+                  {
+                    fill: #323130;
+                    font-size: 12px;
+                    font-weight: 600;
+                  }
+              dominantBaseline="auto"
+              textAnchor="end"
+              x={-60.58001193073337}
+              y={-13.19326170710649}
+            >
+              45.0k
+            </text>
           </g>
         </g>
       </svg>
@@ -2885,7 +2450,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone14"
+              data-focuszone-id="FocusZone28"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3182,7 +2747,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
 </div>
 `;
 
-exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
+exports[`DonutChart snapShot testing Should render arc labels in percentage format 1`] = `
 <div
   className=
       ms-DonutChart
@@ -3206,7 +2771,7 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone6"
+    data-focuszone-id="FocusZone32"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3242,9 +2807,9 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+              d="M0.6,-59.997A60,60,0,0,1,56.068,-21.363L0,0Z"
               data-is-focusable={true}
-              id="_Pie_5first20000"
+              id="_Pie_30first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3253,50 +2818,40 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
               opacity={1}
               role="img"
             />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/20, 39000."
+            <text
+              aria-hidden={true}
               className=
 
                   {
-                    cursor: default;
-                    fill: #0078D4;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
+                    fill: #323130;
+                    font-size: 12px;
+                    font-weight: 600;
                   }
-              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_5second39000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
+              dominantBaseline="auto"
+              textAnchor="start"
+              x={35.43557344375781}
+              y={-50.87553571916512}
+            >
+              19%
+            </text>
           </g>
           <g>
             <path
-              aria-label="2020/04/25, 45000."
+              aria-label="2020/04/20, 39000."
               className=
 
                   {
                     cursor: default;
-                    fill: #DADADA;
+                    fill: #0078D4;
                     outline: transparent;
                     stroke: #ffffff;
                   }
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+              d="M56.484,-20.237A60,60,0,0,1,-24.404,54.813L0,0Z"
               data-is-focusable={true}
-              id="_Pie_5third45000"
+              id="_Pie_30second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3305,106 +2860,40 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
               opacity={1}
               role="img"
             />
-          </g>
-        </g>
-      </svg>
-    </div>
-  </div>
-  <span
-    className="ms-layer"
-  />
-</div>
-`;
-
-exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
-<div
-  className=
-      ms-DonutChart
-      {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-        font-size: 14px;
-        font-weight: 400;
-        height: 100%;
-        width: 100%;
-      }
-  onMouseLeave={[Function]}
->
-  <div
-    className=
-        ms-FocusZone
-        &:focus {
-          outline: none;
-        }
-    data-focuszone-id="FocusZone9"
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onMouseDownCapture={[Function]}
-  >
-    <div>
-      <svg
-        aria-label="Stacked Bar chart example"
-        className=
-
-            {
-              alignment-adjust: center;
-              box-sizing: content-box;
-              display: block;
-              height: 200px;
-              overflow: visible;
-              width: 200px;
-            }
-      >
-        <g
-          transform="translate(100, 100)"
-        >
-          <g>
-            <path
-              aria-label="2020/04/30, 20000."
+            <text
+              aria-hidden={true}
               className=
 
                   {
-                    cursor: default;
-                    fill: #E5E5E5;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
+                    fill: #323130;
+                    font-size: 12px;
+                    font-weight: 600;
                   }
-              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_8first20000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
+              dominantBaseline="hanging"
+              textAnchor="start"
+              x={42.16983494620299}
+              y={45.45002772947447}
+            >
+              38%
+            </text>
           </g>
           <g>
             <path
-              aria-label="2020/04/20, 39000."
+              aria-label="2020/04/25, 45000."
               className=
 
                   {
                     cursor: default;
-                    fill: #0078D4;
+                    fill: #DADADA;
                     outline: transparent;
                     stroke: #ffffff;
                   }
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+              d="M-25.495,54.314A60,60,0,0,1,-0.6,-59.997L0,0Z"
               data-is-focusable={true}
-              id="_Pie_8second39000"
+              id="_Pie_30third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3413,32 +2902,22 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
               opacity={1}
               role="img"
             />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/25, 45000."
+            <text
+              aria-hidden={true}
               className=
 
                   {
-                    cursor: default;
-                    fill: #DADADA;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
+                    fill: #323130;
+                    font-size: 12px;
+                    font-weight: 600;
                   }
-              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_8third45000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              opacity={1}
-              role="img"
-            />
+              dominantBaseline="auto"
+              textAnchor="end"
+              x={-60.58001193073337}
+              y={-13.19326170710649}
+            >
+              43%
+            </text>
           </g>
         </g>
       </svg>
@@ -3493,7 +2972,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone10"
+              data-focuszone-id="FocusZone33"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3790,7 +3269,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
 </div>
 `;
 
-exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
+exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
 <div
   className=
       ms-DonutChart
@@ -3814,7 +3293,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone17"
+    data-focuszone-id="FocusZone3"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3850,9 +3329,9 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+              d="M1.141,-99.993A100,100,0,0,1,93.397,-35.736L51.182,-20.134A55,55,0,0,0,1.141,-54.988Z"
               data-is-focusable={true}
-              id="_Pie_16first20000"
+              id="_Pie_1first20000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3876,9 +3355,9 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+              d="M94.188,-33.595A100,100,0,0,1,-40.544,91.412L-21.828,50.483A55,55,0,0,0,51.974,-17.993Z"
               data-is-focusable={true}
-              id="_Pie_16second39000"
+              id="_Pie_1second39000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3902,9 +3381,9 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
                   &::-moz-focus-inner {
                     border: 0;
                   }
-              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+              d="M-42.619,90.463A100,100,0,0,1,-1.141,-99.993L-1.141,-54.988A55,55,0,0,0,-23.904,49.534Z"
               data-is-focusable={true}
-              id="_Pie_16third45000"
+              id="_Pie_1third45000"
               onBlur={[Function]}
               onFocus={[Function]}
               onMouseLeave={[Function]}
@@ -3914,24 +3393,6 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
               role="img"
             />
           </g>
-          <text
-            className=
-
-                {
-                  fill: #323130;
-                  font-size: 24px;
-                  font-weight: 600;
-                }
-                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
-                  fill: rgb(179, 179, 179);
-                }
-            data-is-focusable={true}
-            dominantBaseline="middle"
-            textAnchor="middle"
-            y={5}
-          >
-            1,000
-          </text>
         </g>
       </svg>
     </div>
@@ -3961,227 +3422,47 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
           }
     >
       <div>
-        <div
-          style={
-            Object {
-              "position": "relative",
-            }
-          }
-        >
-          <div
-            data-automation-id="visibleContent"
-            style={
-              Object {
-                "position": "fixed",
-                "visibility": "hidden",
-              }
-            }
-          >
-            <div
-              aria-label="Legends"
-              aria-multiselectable={false}
-              className=
-                  ms-FocusZone
-                  &:focus {
-                    outline: none;
-                  }
-              data-focuszone-id="FocusZone18"
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onMouseDownCapture={[Function]}
-              role="listbox"
-            >
-              <div
-                className=
-                    ms-OverflowSet
-                    {
-                      display: flex;
-                      flex-wrap: wrap;
-                      justify-content: center;
-                      position: relative;
-                    }
-                role="group"
-              >
-                <div
-                  className=
-                      ms-OverflowSet-item
-                      {
-                        display: inherit;
-                        flex-shrink: 0;
-                      }
-                  role="none"
-                >
-                  <button
-                    aria-label="first"
-                    aria-posinset={1}
-                    aria-selected={false}
-                    aria-setsize={3}
-                    className=
-
-                        {
-                          align-items: center;
-                          background: none;
-                          border: none;
-                          cursor: pointer;
-                          display: flex;
-                          outline: transparent;
-                          padding-bottom: 8px;
-                          padding-left: 8px;
-                          padding-right: 8px;
-                          padding-top: 8px;
-                          position: relative;
-                          text-transform: capitalize;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 1px;
-                          content: "";
-                          left: 1px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 1px;
-                          top: 1px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          outline-color: #605e5c;
-                        }
-                    data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
-                  >
-                    <div
-                      className=
-
-                          {
-                            background-color: #E5E5E5;
-                            border-color: #E5E5E5;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
-                          }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #E5E5E5, #E5E5E5);
-                            opacity: ;
-                          }
-                    />
-                    <div
-                      className=
-
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
-                          }
-                    >
-                      first
-                    </div>
-                  </button>
-                </div>
-                <div
-                  className=
-                      ms-OverflowSet-item
-                      {
-                        display: inherit;
-                        flex-shrink: 0;
-                      }
-                  role="none"
-                >
-                  <button
-                    aria-label="second"
-                    aria-posinset={2}
-                    aria-selected={false}
-                    aria-setsize={3}
-                    className=
-
-                        {
-                          align-items: center;
-                          background: none;
-                          border: none;
-                          cursor: pointer;
-                          display: flex;
-                          outline: transparent;
-                          padding-bottom: 8px;
-                          padding-left: 8px;
-                          padding-right: 8px;
-                          padding-top: 8px;
-                          position: relative;
-                          text-transform: capitalize;
-                        }
-                        &::-moz-focus-inner {
-                          border: 0;
-                        }
-                        .ms-Fabric--isFocusVisible &:focus:after {
-                          border: 1px solid transparent;
-                          bottom: 1px;
-                          content: "";
-                          left: 1px;
-                          outline: 1px solid #605e5c;
-                          position: absolute;
-                          right: 1px;
-                          top: 1px;
-                          z-index: 1;
-                        }
-                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                          outline-color: #605e5c;
-                        }
-                    data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
-                  >
-                    <div
-                      className=
-
-                          {
-                            background-color: #0078D4;
-                            border-color: #0078D4;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
-                          }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #0078D4, #0078D4);
-                            opacity: ;
-                          }
-                    />
-                    <div
-                      className=
-
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
-                          }
-                    >
-                      second
-                    </div>
-                  </button>
-                </div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone4"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: center;
+                      position: relative;
+                    }
+                role="group"
+              >
                 <div
                   className=
                       ms-OverflowSet-item
@@ -4192,8 +3473,8 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
                   role="none"
                 >
                   <button
-                    aria-label="third"
-                    aria-posinset={3}
+                    aria-label="first"
+                    aria-posinset={1}
                     aria-selected={false}
                     aria-setsize={3}
                     className=
@@ -4230,485 +3511,227 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
                           outline-color: #605e5c;
                         }
                     data-is-focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseOut={[Function]}
-                    onMouseOver={[Function]}
-                    role="option"
-                  >
-                    <div
-                      className=
-
-                          {
-                            background-color: #DADADA;
-                            border-color: #DADADA;
-                            border: 1px solid;
-                            content: ;
-                            height: 12px;
-                            margin-right: 8px;
-                            width: 12px;
-                          }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                            content: linear-gradient(to right, #DADADA, #DADADA);
-                            opacity: ;
-                          }
-                    />
-                    <div
-                      className=
-
-                          {
-                            -moz-osx-font-smoothing: grayscale;
-                            -webkit-font-smoothing: antialiased;
-                            color: #323130;
-                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                            font-size: 12px;
-                            font-weight: 400;
-                            line-height: 16px;
-                            opacity: ;
-                          }
-                    >
-                      third
-                    </div>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
-<div>
-  <div
-    class=
-        ms-DonutChart
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          align-items: center;
-          display: flex;
-          flex-direction: column;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: 100%;
-          width: 100%;
-        }
-  >
-    <div
-      class=
-          ms-FocusZone
-          &:focus {
-            outline: none;
-          }
-      data-focuszone-id="FocusZone46"
-    >
-      <div>
-        <svg
-          aria-label="Stacked Bar chart example"
-          class=
-
-              {
-                alignment-adjust: center;
-                box-sizing: content-box;
-                display: block;
-                height: 260px;
-                overflow: visible;
-                width: 300px;
-              }
-          focusable="false"
-          viewBox="0 0 0 260"
-        >
-          <g
-            transform="translate(150, 130)"
-          >
-            <g>
-              <path
-                aria-label="2020/04/30, 20000."
-                class=
-
-                    {
-                      cursor: default;
-                      fill: #E5E5E5;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M1.412,-129.992A130,130,0,0,1,121.441,-46.39L51.083,-20.385A55,55,0,0,0,1.412,-54.982Z"
-                data-is-focusable="true"
-                id="_Pie_45first20000"
-                opacity="1"
-                role="img"
-                tabindex="0"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="2020/04/20, 39000."
-                class=
-
-                    {
-                      cursor: default;
-                      fill: #0078D4;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M122.42,-43.742A130,130,0,0,1,-52.773,118.807L-21.58,50.59A55,55,0,0,0,52.061,-17.737Z"
-                data-is-focusable="true"
-                id="_Pie_45second39000"
-                opacity="1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="2020/04/25, 45000."
-                class=
-
-                    {
-                      cursor: default;
-                      fill: #DADADA;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M-55.34,117.633A130,130,0,0,1,-1.412,-129.992L-1.412,-54.982A55,55,0,0,0,-24.147,49.416Z"
-                data-is-focusable="true"
-                id="_Pie_45third45000"
-                opacity="1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-          </g>
-        </svg>
-      </div>
-    </div>
-    <span
-      class="ms-layer"
-    />
-    <div
-      class=
-
-          {
-            padding-top: 16px;
-            width: 300px;
-          }
-    >
-      <div
-        class=
-
-            {
-              align-items: center;
-              margin-bottom: 0;
-              margin-left: -8px;
-              margin-right: 0;
-              margin-top: -8px;
-              white-space: nowrap;
-              width: 100%;
-            }
-      >
-        <div>
-          <div
-            style="position: relative;"
-          >
-            <div
-              data-automation-id="visibleContent"
-              style="position: fixed; visibility: hidden;"
-            >
-              <div
-                aria-label="Legends"
-                aria-multiselectable="false"
-                class=
-                    ms-FocusZone
-                    &:focus {
-                      outline: none;
-                    }
-                data-focuszone-id="FocusZone47"
-                role="listbox"
-              >
-                <div
-                  class=
-                      ms-OverflowSet
-                      {
-                        display: flex;
-                        flex-wrap: wrap;
-                        justify-content: center;
-                        position: relative;
-                      }
-                  role="group"
-                >
-                  <div
-                    class=
-                        ms-OverflowSet-item
-                        {
-                          display: inherit;
-                          flex-shrink: 0;
-                        }
-                    role="none"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
                   >
-                    <button
-                      aria-label="first"
-                      aria-posinset="1"
-                      aria-selected="false"
-                      aria-setsize="3"
-                      class=
+                    <div
+                      className=
 
                           {
-                            align-items: center;
-                            background: none;
-                            border: none;
-                            cursor: pointer;
-                            display: flex;
-                            outline: transparent;
-                            padding-bottom: 8px;
-                            padding-left: 8px;
-                            padding-right: 8px;
-                            padding-top: 8px;
-                            position: relative;
-                            text-transform: capitalize;
-                          }
-                          &::-moz-focus-inner {
-                            border: 0;
+                            background-color: #E5E5E5;
+                            border-color: #E5E5E5;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
                           }
-                          .ms-Fabric--isFocusVisible &:focus:after {
-                            border: 1px solid transparent;
-                            bottom: 1px;
-                            content: "";
-                            left: 1px;
-                            outline: 1px solid #605e5c;
-                            position: absolute;
-                            right: 1px;
-                            top: 1px;
-                            z-index: 1;
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #E5E5E5, #E5E5E5);
+                            opacity: ;
                           }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                            outline-color: #605e5c;
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
                           }
-                      data-is-focusable="true"
-                      role="option"
-                      tabindex="0"
                     >
-                      <div
-                        class=
-
-                            {
-                              background-color: #E5E5E5;
-                              border-color: #E5E5E5;
-                              border: 1px solid;
-                              content: ;
-                              height: 12px;
-                              margin-right: 8px;
-                              width: 12px;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #E5E5E5, #E5E5E5);
-                              opacity: ;
-                            }
-                      />
-                      <div
-                        class=
+                      first
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="second"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
 
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              color: #323130;
-                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                              font-size: 12px;
-                              font-weight: 400;
-                              line-height: 16px;
-                              opacity: ;
-                            }
-                      >
-                        first
-                      </div>
-                    </button>
-                  </div>
-                  <div
-                    class=
-                        ms-OverflowSet-item
                         {
-                          display: inherit;
-                          flex-shrink: 0;
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
                         }
-                    role="none"
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
                   >
-                    <button
-                      aria-label="second"
-                      aria-posinset="2"
-                      aria-selected="false"
-                      aria-setsize="3"
-                      class=
+                    <div
+                      className=
 
                           {
-                            align-items: center;
-                            background: none;
-                            border: none;
-                            cursor: pointer;
-                            display: flex;
-                            outline: transparent;
-                            padding-bottom: 8px;
-                            padding-left: 8px;
-                            padding-right: 8px;
-                            padding-top: 8px;
-                            position: relative;
-                            text-transform: capitalize;
-                          }
-                          &::-moz-focus-inner {
-                            border: 0;
+                            background-color: #0078D4;
+                            border-color: #0078D4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
                           }
-                          .ms-Fabric--isFocusVisible &:focus:after {
-                            border: 1px solid transparent;
-                            bottom: 1px;
-                            content: "";
-                            left: 1px;
-                            outline: 1px solid #605e5c;
-                            position: absolute;
-                            right: 1px;
-                            top: 1px;
-                            z-index: 1;
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078D4, #0078D4);
+                            opacity: ;
                           }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                            outline-color: #605e5c;
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
                           }
-                      data-is-focusable="true"
-                      role="option"
-                      tabindex="-1"
                     >
-                      <div
-                        class=
-
-                            {
-                              background-color: #0078D4;
-                              border-color: #0078D4;
-                              border: 1px solid;
-                              content: ;
-                              height: 12px;
-                              margin-right: 8px;
-                              width: 12px;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #0078D4, #0078D4);
-                              opacity: ;
-                            }
-                      />
-                      <div
-                        class=
+                      second
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="third"
+                    aria-posinset={3}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
 
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              color: #323130;
-                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                              font-size: 12px;
-                              font-weight: 400;
-                              line-height: 16px;
-                              opacity: ;
-                            }
-                      >
-                        second
-                      </div>
-                    </button>
-                  </div>
-                  <div
-                    class=
-                        ms-OverflowSet-item
                         {
-                          display: inherit;
-                          flex-shrink: 0;
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
                         }
-                    role="none"
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
                   >
-                    <button
-                      aria-label="third"
-                      aria-posinset="3"
-                      aria-selected="false"
-                      aria-setsize="3"
-                      class=
+                    <div
+                      className=
 
                           {
-                            align-items: center;
-                            background: none;
-                            border: none;
-                            cursor: pointer;
-                            display: flex;
-                            outline: transparent;
-                            padding-bottom: 8px;
-                            padding-left: 8px;
-                            padding-right: 8px;
-                            padding-top: 8px;
-                            position: relative;
-                            text-transform: capitalize;
-                          }
-                          &::-moz-focus-inner {
-                            border: 0;
+                            background-color: #DADADA;
+                            border-color: #DADADA;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
                           }
-                          .ms-Fabric--isFocusVisible &:focus:after {
-                            border: 1px solid transparent;
-                            bottom: 1px;
-                            content: "";
-                            left: 1px;
-                            outline: 1px solid #605e5c;
-                            position: absolute;
-                            right: 1px;
-                            top: 1px;
-                            z-index: 1;
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #DADADA, #DADADA);
+                            opacity: ;
                           }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                            outline-color: #605e5c;
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
                           }
-                      data-is-focusable="true"
-                      role="option"
-                      tabindex="-1"
                     >
-                      <div
-                        class=
-
-                            {
-                              background-color: #DADADA;
-                              border-color: #DADADA;
-                              border: 1px solid;
-                              content: ;
-                              height: 12px;
-                              margin-right: 8px;
-                              width: 12px;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #DADADA, #DADADA);
-                              opacity: ;
-                            }
-                      />
-                      <div
-                        class=
-
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              color: #323130;
-                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                              font-size: 12px;
-                              font-weight: 400;
-                              line-height: 16px;
-                              opacity: ;
-                            }
-                      >
-                        third
-                      </div>
-                    </button>
-                  </div>
+                      third
+                    </div>
+                  </button>
                 </div>
               </div>
             </div>
@@ -4717,436 +3740,472 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
       </div>
     </div>
   </div>
-</div>
-`;
-
-exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
-<div>
+</div>
+`;
+
+exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1`] = `
+<div
+  className=
+      ms-DonutChart
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        width: 100%;
+      }
+  onMouseLeave={[Function]}
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone17"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <div>
+      <svg
+        aria-label="Stacked Bar chart example"
+        className=
+
+            {
+              alignment-adjust: center;
+              box-sizing: content-box;
+              display: block;
+              height: 200px;
+              overflow: visible;
+              width: 200px;
+            }
+      >
+        <g
+          transform="translate(100, 100)"
+        >
+          <g>
+            <path
+              aria-label="2020/04/30, 20000."
+              className=
+
+                  {
+                    cursor: default;
+                    fill: #E5E5E5;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_15first20000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="2020/04/20, 39000."
+              className=
+
+                  {
+                    cursor: default;
+                    fill: #0078D4;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_15second39000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="2020/04/25, 45000."
+              className=
+
+                  {
+                    cursor: default;
+                    fill: #DADADA;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_15third45000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
   <div
-    class=
-        ms-DonutChart
+    className=
+
         {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          align-items: center;
-          display: flex;
-          flex-direction: column;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: 100%;
-          width: 100%;
+          padding-top: 16px;
+          width: 200px;
         }
   >
     <div
-      class=
-          ms-FocusZone
-          &:focus {
-            outline: none;
-          }
-      data-focuszone-id="FocusZone50"
-    >
-      <div>
-        <svg
-          aria-label="Stacked Bar chart example"
-          class=
-
-              {
-                alignment-adjust: center;
-                box-sizing: content-box;
-                display: block;
-                height: 260px;
-                overflow: visible;
-                width: 300px;
-              }
-          focusable="false"
-          viewBox="0 0 0 260"
-        >
-          <g
-            transform="translate(150, 130)"
-          >
-            <g>
-              <path
-                aria-label="2020/04/30, 20000."
-                class=
-
-                    {
-                      cursor: default;
-                      fill: #E5E5E5;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M1.412,-129.992A130,130,0,0,1,121.441,-46.39L51.083,-20.385A55,55,0,0,0,1.412,-54.982Z"
-                data-is-focusable="true"
-                id="_Pie_49first20000"
-                opacity="1"
-                role="img"
-                tabindex="0"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="2020/04/20, 39000."
-                class=
-
-                    {
-                      cursor: default;
-                      fill: #0078D4;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M122.42,-43.742A130,130,0,0,1,-52.773,118.807L-21.58,50.59A55,55,0,0,0,52.061,-17.737Z"
-                data-is-focusable="true"
-                id="_Pie_49second39000"
-                opacity="1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="2020/04/25, 45000."
-                class=
-
-                    {
-                      cursor: default;
-                      fill: #DADADA;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M-55.34,117.633A130,130,0,0,1,-1.412,-129.992L-1.412,-54.982A55,55,0,0,0,-24.147,49.416Z"
-                data-is-focusable="true"
-                id="_Pie_49third45000"
-                opacity="1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-          </g>
-        </svg>
-      </div>
-    </div>
-    <span
-      class="ms-layer"
-    />
-    <div
-      class=
+      className=
 
           {
-            padding-top: 16px;
-            width: 300px;
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
           }
     >
-      <div
-        class=
-
-            {
-              align-items: center;
-              margin-bottom: 0;
-              margin-left: -8px;
-              margin-right: 0;
-              margin-top: -8px;
-              white-space: nowrap;
-              width: 100%;
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
             }
-      >
-        <div>
+          }
+        >
           <div
-            style="position: relative;"
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
           >
             <div
-              data-automation-id="visibleContent"
-              style="position: fixed; visibility: hidden;"
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone18"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
             >
               <div
-                aria-label="Legends"
-                aria-multiselectable="false"
-                class=
-                    ms-FocusZone
-                    &:focus {
-                      outline: none;
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: center;
+                      position: relative;
                     }
-                data-focuszone-id="FocusZone51"
-                role="listbox"
+                role="group"
               >
                 <div
-                  class=
-                      ms-OverflowSet
+                  className=
+                      ms-OverflowSet-item
                       {
-                        display: flex;
-                        flex-wrap: wrap;
-                        justify-content: center;
-                        position: relative;
+                        display: inherit;
+                        flex-shrink: 0;
                       }
-                  role="group"
+                  role="none"
                 >
-                  <div
-                    class=
-                        ms-OverflowSet-item
+                  <button
+                    aria-label="first"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
                         {
-                          display: inherit;
-                          flex-shrink: 0;
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
                         }
-                    role="none"
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
                   >
-                    <button
-                      aria-label="first"
-                      aria-posinset="1"
-                      aria-selected="false"
-                      aria-setsize="3"
-                      class=
+                    <div
+                      className=
 
                           {
-                            align-items: center;
-                            background: none;
-                            border: none;
-                            cursor: pointer;
-                            display: flex;
-                            outline: transparent;
-                            padding-bottom: 8px;
-                            padding-left: 8px;
-                            padding-right: 8px;
-                            padding-top: 8px;
-                            position: relative;
-                            text-transform: capitalize;
-                          }
-                          &::-moz-focus-inner {
-                            border: 0;
+                            background-color: #E5E5E5;
+                            border-color: #E5E5E5;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
                           }
-                          .ms-Fabric--isFocusVisible &:focus:after {
-                            border: 1px solid transparent;
-                            bottom: 1px;
-                            content: "";
-                            left: 1px;
-                            outline: 1px solid #605e5c;
-                            position: absolute;
-                            right: 1px;
-                            top: 1px;
-                            z-index: 1;
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #E5E5E5, #E5E5E5);
+                            opacity: ;
                           }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                            outline-color: #605e5c;
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
                           }
-                      data-is-focusable="true"
-                      role="option"
-                      tabindex="0"
                     >
-                      <div
-                        class=
-
-                            {
-                              background-color: #E5E5E5;
-                              border-color: #E5E5E5;
-                              border: 1px solid;
-                              content: ;
-                              height: 12px;
-                              margin-right: 8px;
-                              width: 12px;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #E5E5E5, #E5E5E5);
-                              opacity: ;
-                            }
-                      />
-                      <div
-                        class=
+                      first
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="second"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
 
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              color: #323130;
-                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                              font-size: 12px;
-                              font-weight: 400;
-                              line-height: 16px;
-                              opacity: ;
-                            }
-                      >
-                        first
-                      </div>
-                    </button>
-                  </div>
-                  <div
-                    class=
-                        ms-OverflowSet-item
                         {
-                          display: inherit;
-                          flex-shrink: 0;
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
                         }
-                    role="none"
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
                   >
-                    <button
-                      aria-label="second"
-                      aria-posinset="2"
-                      aria-selected="false"
-                      aria-setsize="3"
-                      class=
+                    <div
+                      className=
 
                           {
-                            align-items: center;
-                            background: none;
-                            border: none;
-                            cursor: pointer;
-                            display: flex;
-                            outline: transparent;
-                            padding-bottom: 8px;
-                            padding-left: 8px;
-                            padding-right: 8px;
-                            padding-top: 8px;
-                            position: relative;
-                            text-transform: capitalize;
-                          }
-                          &::-moz-focus-inner {
-                            border: 0;
+                            background-color: #0078D4;
+                            border-color: #0078D4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
                           }
-                          .ms-Fabric--isFocusVisible &:focus:after {
-                            border: 1px solid transparent;
-                            bottom: 1px;
-                            content: "";
-                            left: 1px;
-                            outline: 1px solid #605e5c;
-                            position: absolute;
-                            right: 1px;
-                            top: 1px;
-                            z-index: 1;
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078D4, #0078D4);
+                            opacity: ;
                           }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                            outline-color: #605e5c;
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
                           }
-                      data-is-focusable="true"
-                      role="option"
-                      tabindex="-1"
                     >
-                      <div
-                        class=
-
-                            {
-                              background-color: #0078D4;
-                              border-color: #0078D4;
-                              border: 1px solid;
-                              content: ;
-                              height: 12px;
-                              margin-right: 8px;
-                              width: 12px;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #0078D4, #0078D4);
-                              opacity: ;
-                            }
-                      />
-                      <div
-                        class=
+                      second
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="third"
+                    aria-posinset={3}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
 
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              color: #323130;
-                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                              font-size: 12px;
-                              font-weight: 400;
-                              line-height: 16px;
-                              opacity: ;
-                            }
-                      >
-                        second
-                      </div>
-                    </button>
-                  </div>
-                  <div
-                    class=
-                        ms-OverflowSet-item
                         {
-                          display: inherit;
-                          flex-shrink: 0;
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
                         }
-                    role="none"
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
                   >
-                    <button
-                      aria-label="third"
-                      aria-posinset="3"
-                      aria-selected="false"
-                      aria-setsize="3"
-                      class=
+                    <div
+                      className=
 
                           {
-                            align-items: center;
-                            background: none;
-                            border: none;
-                            cursor: pointer;
-                            display: flex;
-                            outline: transparent;
-                            padding-bottom: 8px;
-                            padding-left: 8px;
-                            padding-right: 8px;
-                            padding-top: 8px;
-                            position: relative;
-                            text-transform: capitalize;
-                          }
-                          &::-moz-focus-inner {
-                            border: 0;
+                            background-color: #DADADA;
+                            border-color: #DADADA;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
                           }
-                          .ms-Fabric--isFocusVisible &:focus:after {
-                            border: 1px solid transparent;
-                            bottom: 1px;
-                            content: "";
-                            left: 1px;
-                            outline: 1px solid #605e5c;
-                            position: absolute;
-                            right: 1px;
-                            top: 1px;
-                            z-index: 1;
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #DADADA, #DADADA);
+                            opacity: ;
                           }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                            outline-color: #605e5c;
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
                           }
-                      data-is-focusable="true"
-                      role="option"
-                      tabindex="-1"
                     >
-                      <div
-                        class=
-
-                            {
-                              background-color: #DADADA;
-                              border-color: #DADADA;
-                              border: 1px solid;
-                              content: ;
-                              height: 12px;
-                              margin-right: 8px;
-                              width: 12px;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #DADADA, #DADADA);
-                              opacity: ;
-                            }
-                      />
-                      <div
-                        class=
-
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              color: #323130;
-                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                              font-size: 12px;
-                              font-weight: 400;
-                              line-height: 16px;
-                              opacity: ;
-                            }
-                      >
-                        third
-                      </div>
-                    </button>
-                  </div>
+                      third
+                    </div>
+                  </button>
                 </div>
               </div>
             </div>
@@ -5158,1030 +4217,1095 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
 </div>
 `;
 
-exports[`Should hide callout on mouse leave 1`] = `
-<div>
+exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
+<div
+  className=
+      ms-DonutChart
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        width: 100%;
+      }
+  onMouseLeave={[Function]}
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone8"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <div>
+      <svg
+        aria-label="Stacked Bar chart example"
+        className=
+
+            {
+              alignment-adjust: center;
+              box-sizing: content-box;
+              display: block;
+              height: 200px;
+              overflow: visible;
+              width: 200px;
+            }
+      >
+        <g
+          transform="translate(100, 100)"
+        >
+          <g>
+            <path
+              aria-label="2020/04/30, 20000."
+              className=
+
+                  {
+                    cursor: default;
+                    fill: #E5E5E5;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_6first20000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="2020/04/20, 39000."
+              className=
+
+                  {
+                    cursor: default;
+                    fill: #0078D4;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_6second39000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="2020/04/25, 45000."
+              className=
+
+                  {
+                    cursor: default;
+                    fill: #DADADA;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_6third45000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
+<div
+  className=
+      ms-DonutChart
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        width: 100%;
+      }
+  onMouseLeave={[Function]}
+>
   <div
-    class=
-        ms-DonutChart
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          align-items: center;
-          display: flex;
-          flex-direction: column;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-          height: 100%;
-          width: 100%;
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
         }
+    data-focuszone-id="FocusZone12"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
   >
-    <div
-      class=
-          ms-FocusZone
-          &:focus {
-            outline: none;
-          }
-      data-focuszone-id="FocusZone7"
-    >
-      <div>
-        <svg
-          aria-label="Stacked Bar chart example"
-          class=
-
-              {
-                alignment-adjust: center;
-                box-sizing: content-box;
-                display: block;
-                height: -40px;
-                overflow: visible;
-                width: 0px;
-              }
-          focusable="false"
-          viewBox="0 0 0 0"
-        >
-          <g
-            transform="translate(0, -20)"
-          >
-            <g>
-              <path
-                aria-label="2020/04/30, 20000."
-                class=
-
-                    {
-                      cursor: default;
-                      fill: #E5E5E5;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
-                data-is-focusable="true"
-                id="_Pie_6first20000"
-                opacity="1"
-                role="img"
-                tabindex="0"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="2020/04/20, 39000."
-                class=
-
-                    {
-                      cursor: default;
-                      fill: #0078D4;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
-                data-is-focusable="true"
-                id="_Pie_6second39000"
-                opacity="1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="2020/04/25, 45000."
-                class=
+    <div>
+      <svg
+        aria-label="Stacked Bar chart example"
+        className=
 
-                    {
-                      cursor: default;
-                      fill: #DADADA;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
-                data-is-focusable="true"
-                id="_Pie_6third45000"
-                opacity="1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-          </g>
-        </svg>
-      </div>
-    </div>
-    <div
-      class=
-          ms-Callout-container
-          {
-            position: relative;
-          }
-      style="visibility: hidden;"
-    >
-      <div
-        class=
-            ms-Callout
             {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              border-radius: 2px;
-              box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
-              box-sizing: border-box;
-              display: flex;
-              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-              font-size: 14px;
-              font-weight: 400;
-              outline: transparent;
-              position: absolute;
-              z-index: 1000000;
-            }
-            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-              border-color: WindowText;
-              border-style: solid;
-              border-width: 1px;
-            }
-            &::-moz-focus-inner {
-              border: 0px;
+              alignment-adjust: center;
+              box-sizing: content-box;
+              display: block;
+              height: 200px;
+              overflow: visible;
+              width: 200px;
             }
-        data-is-focusable="false"
-        hidden=""
-        id="callout5"
-        style="opacity: 0; filter: opacity(0); pointer-events: none;"
-        tabindex="-1"
       >
-        <div
-          class=
-              ms-Callout-main
-              {
-                background-color: #ffffff;
-                border-radius: 2px;
-                overflow-x: hidden;
-                overflow-y: auto;
-                position: relative;
-                width: 100%;
-              }
-          role="text"
-          style="outline: none; max-height: 100%;"
+        <g
+          transform="translate(100, 100)"
         >
-          <div
-            class=
+          <g>
+            <path
+              aria-label="2020/04/30, 20000."
+              className=
 
-                {
-                  background-blend-mode: normal, luminosity;
-                  background-color: #ffffff;
-                  display: grid;
-                  overflow: hidden;
-                  padding-bottom: 10px;
-                  padding-left: 16px;
-                  padding-right: 16px;
-                  padding-top: 11px;
-                }
-          >
-            <div
-              class=
+                  {
+                    cursor: default;
+                    fill: #E5E5E5;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_10first20000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="2020/04/20, 39000."
+              className=
 
                   {
-                    display: flex;
-                    flex-direction: row;
-                    justify-content: space-between;
+                    cursor: default;
+                    fill: #0078D4;
+                    outline: transparent;
+                    stroke: #ffffff;
                   }
-            >
-              <div
-                class=
-
-                    {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      color: #605e5c;
-                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                      font-size: 12px;
-                      font-weight: 400;
-                      line-height: 16px;
-                      opacity: 0.8;
-                    }
-              >
-                 
-              </div>
-            </div>
-            <div
-              class=""
-            >
-              <div
-                class=
-
-                    {
-                      -moz-osx-font-smoothing: grayscale;
-                      -webkit-font-smoothing: antialiased;
-                      border-left: 4px solid #E5E5E5;
-                      color: #323130;
-                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                      font-size: 28px;
-                      font-weight: 600;
-                      line-height: 22px;
-                      margin-top: unset;
-                      padding-left: 8px;
-                    }
-              >
-                <div
-                  class=
-
-                      {
-                        -moz-osx-font-smoothing: grayscale;
-                        -webkit-font-smoothing: antialiased;
-                        color: #323130;
-                        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                        font-size: 12px;
-                        font-weight: 400;
-                        line-height: 16px;
-                      }
-                >
-                  2020/04/30
-                </div>
-                <div
-                  class=
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_10second39000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="2020/04/25, 45000."
+              className=
 
-                      {
-                        -moz-osx-font-smoothing: grayscale;
-                        -webkit-font-smoothing: antialiased;
-                        color: #E5E5E5;
-                        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                        font-size: 28px;
-                        font-weight: bold;
-                        line-height: 36px;
-                      }
-                >
-                  20,000
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+                  {
+                    cursor: default;
+                    fill: #DADADA;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_10third45000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+        </g>
+      </svg>
     </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+  <div
+    className=
+
+        {
+          padding-top: 16px;
+          width: 200px;
+        }
+  >
     <div
-      class=
+      className=
 
           {
-            padding-top: 16px;
-            width: 0px;
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
           }
     >
-      <div
-        class=
-
-            {
-              align-items: center;
-              margin-bottom: 0;
-              margin-left: -8px;
-              margin-right: 0;
-              margin-top: -8px;
-              white-space: nowrap;
-              width: 100%;
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
             }
-      >
-        <div>
+          }
+        >
           <div
-            style="position: relative;"
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
           >
             <div
-              data-automation-id="visibleContent"
-              style="position: fixed; visibility: hidden;"
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone13"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
             >
               <div
-                aria-label="Legends"
-                aria-multiselectable="false"
-                class=
-                    ms-FocusZone
-                    &:focus {
-                      outline: none;
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: center;
+                      position: relative;
                     }
-                data-focuszone-id="FocusZone8"
-                role="listbox"
+                role="group"
               >
                 <div
-                  class=
-                      ms-OverflowSet
+                  className=
+                      ms-OverflowSet-item
                       {
-                        display: flex;
-                        flex-wrap: wrap;
-                        justify-content: center;
-                        position: relative;
+                        display: inherit;
+                        flex-shrink: 0;
                       }
-                  role="group"
+                  role="none"
                 >
-                  <div
-                    class=
-                        ms-OverflowSet-item
+                  <button
+                    aria-label="first"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
                         {
-                          display: inherit;
-                          flex-shrink: 0;
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
                         }
-                    role="none"
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
                   >
-                    <button
-                      aria-label="first"
-                      aria-posinset="1"
-                      aria-selected="false"
-                      aria-setsize="3"
-                      class=
+                    <div
+                      className=
 
                           {
-                            align-items: center;
-                            background: none;
-                            border: none;
-                            cursor: pointer;
-                            display: flex;
-                            outline: transparent;
-                            padding-bottom: 8px;
-                            padding-left: 8px;
-                            padding-right: 8px;
-                            padding-top: 8px;
-                            position: relative;
-                            text-transform: capitalize;
-                          }
-                          &::-moz-focus-inner {
-                            border: 0;
+                            background-color: #E5E5E5;
+                            border-color: #E5E5E5;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
                           }
-                          .ms-Fabric--isFocusVisible &:focus:after {
-                            border: 1px solid transparent;
-                            bottom: 1px;
-                            content: "";
-                            left: 1px;
-                            outline: 1px solid #605e5c;
-                            position: absolute;
-                            right: 1px;
-                            top: 1px;
-                            z-index: 1;
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #E5E5E5, #E5E5E5);
+                            opacity: ;
                           }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                            outline-color: #605e5c;
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
                           }
-                      data-is-focusable="true"
-                      role="option"
-                      tabindex="0"
                     >
-                      <div
-                        class=
-
-                            {
-                              background-color: #E5E5E5;
-                              border-color: #E5E5E5;
-                              border: 1px solid;
-                              content: ;
-                              height: 12px;
-                              margin-right: 8px;
-                              width: 12px;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #E5E5E5, #E5E5E5);
-                              opacity: ;
-                            }
-                      />
-                      <div
-                        class=
+                      first
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="second"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
 
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              color: #323130;
-                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                              font-size: 12px;
-                              font-weight: 400;
-                              line-height: 16px;
-                              opacity: ;
-                            }
-                      >
-                        first
-                      </div>
-                    </button>
-                  </div>
-                  <div
-                    class=
-                        ms-OverflowSet-item
                         {
-                          display: inherit;
-                          flex-shrink: 0;
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
                         }
-                    role="none"
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
                   >
-                    <button
-                      aria-label="second"
-                      aria-posinset="2"
-                      aria-selected="false"
-                      aria-setsize="3"
-                      class=
+                    <div
+                      className=
 
                           {
-                            align-items: center;
-                            background: none;
-                            border: none;
-                            cursor: pointer;
-                            display: flex;
-                            outline: transparent;
-                            padding-bottom: 8px;
-                            padding-left: 8px;
-                            padding-right: 8px;
-                            padding-top: 8px;
-                            position: relative;
-                            text-transform: capitalize;
-                          }
-                          &::-moz-focus-inner {
-                            border: 0;
-                          }
-                          .ms-Fabric--isFocusVisible &:focus:after {
-                            border: 1px solid transparent;
-                            bottom: 1px;
-                            content: "";
-                            left: 1px;
-                            outline: 1px solid #605e5c;
-                            position: absolute;
-                            right: 1px;
-                            top: 1px;
-                            z-index: 1;
+                            background-color: #0078D4;
+                            border-color: #0078D4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
                           }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                            outline-color: #605e5c;
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078D4, #0078D4);
+                            opacity: ;
                           }
-                      data-is-focusable="true"
-                      role="option"
-                      tabindex="-1"
-                    >
-                      <div
-                        class=
+                    />
+                    <div
+                      className=
 
-                            {
-                              background-color: #0078D4;
-                              border-color: #0078D4;
-                              border: 1px solid;
-                              content: ;
-                              height: 12px;
-                              margin-right: 8px;
-                              width: 12px;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #0078D4, #0078D4);
-                              opacity: ;
-                            }
-                      />
-                      <div
-                        class=
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      second
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="third"
+                    aria-posinset={3}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
 
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              color: #323130;
-                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                              font-size: 12px;
-                              font-weight: 400;
-                              line-height: 16px;
-                              opacity: ;
-                            }
-                      >
-                        second
-                      </div>
-                    </button>
-                  </div>
-                  <div
-                    class=
-                        ms-OverflowSet-item
                         {
-                          display: inherit;
-                          flex-shrink: 0;
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
                         }
-                    role="none"
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
                   >
-                    <button
-                      aria-label="third"
-                      aria-posinset="3"
-                      aria-selected="false"
-                      aria-setsize="3"
-                      class=
+                    <div
+                      className=
 
                           {
-                            align-items: center;
-                            background: none;
-                            border: none;
-                            cursor: pointer;
-                            display: flex;
-                            outline: transparent;
-                            padding-bottom: 8px;
-                            padding-left: 8px;
-                            padding-right: 8px;
-                            padding-top: 8px;
-                            position: relative;
-                            text-transform: capitalize;
-                          }
-                          &::-moz-focus-inner {
-                            border: 0;
+                            background-color: #DADADA;
+                            border-color: #DADADA;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
                           }
-                          .ms-Fabric--isFocusVisible &:focus:after {
-                            border: 1px solid transparent;
-                            bottom: 1px;
-                            content: "";
-                            left: 1px;
-                            outline: 1px solid #605e5c;
-                            position: absolute;
-                            right: 1px;
-                            top: 1px;
-                            z-index: 1;
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #DADADA, #DADADA);
+                            opacity: ;
                           }
-                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                            outline-color: #605e5c;
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
                           }
-                      data-is-focusable="true"
-                      role="option"
-                      tabindex="-1"
                     >
-                      <div
-                        class=
+                      third
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
+<div
+  className=
+      ms-DonutChart
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        width: 100%;
+      }
+  onMouseLeave={[Function]}
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone22"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <div>
+      <svg
+        aria-label="Stacked Bar chart example"
+        className=
+
+            {
+              alignment-adjust: center;
+              box-sizing: content-box;
+              display: block;
+              height: 200px;
+              overflow: visible;
+              width: 200px;
+            }
+      >
+        <g
+          transform="translate(100, 100)"
+        >
+          <g>
+            <path
+              aria-label="2020/04/30, 20000."
+              className=
+
+                  {
+                    cursor: default;
+                    fill: #E5E5E5;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_20first20000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="2020/04/20, 39000."
+              className=
+
+                  {
+                    cursor: default;
+                    fill: #0078D4;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_20second39000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="2020/04/25, 45000."
+              className=
 
-                            {
-                              background-color: #DADADA;
-                              border-color: #DADADA;
-                              border: 1px solid;
-                              content: ;
-                              height: 12px;
-                              margin-right: 8px;
-                              width: 12px;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                              content: linear-gradient(to right, #DADADA, #DADADA);
-                              opacity: ;
-                            }
-                      />
-                      <div
-                        class=
+                  {
+                    cursor: default;
+                    fill: #DADADA;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+              data-is-focusable={true}
+              id="_Pie_20third45000"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              opacity={1}
+              role="img"
+            />
+          </g>
+          <text
+            className=
 
-                            {
-                              -moz-osx-font-smoothing: grayscale;
-                              -webkit-font-smoothing: antialiased;
-                              color: #323130;
-                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                              font-size: 12px;
-                              font-weight: 400;
-                              line-height: 16px;
-                              opacity: ;
-                            }
-                      >
-                        third
-                      </div>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+                {
+                  fill: #323130;
+                  font-size: 24px;
+                  font-weight: 600;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+                  fill: rgb(179, 179, 179);
+                }
+            data-is-focusable={true}
+            dominantBaseline="middle"
+            textAnchor="middle"
+            y={5}
+          >
+            1,000
+          </text>
+        </g>
+      </svg>
     </div>
   </div>
-</div>
-`;
-
-exports[`Should reflect theme change 1`] = `
-<div>
+  <span
+    className="ms-layer"
+  />
   <div
-    class=
+    className=
 
         {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          background: #1b1a19;
-          color: #f3f2f1;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
+          padding-top: 16px;
+          width: 200px;
         }
   >
     <div
-      class=
-          ms-DonutChart
+      className=
+
           {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
             align-items: center;
-            display: flex;
-            flex-direction: column;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
-            font-weight: 400;
-            height: 100%;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
             width: 100%;
           }
     >
-      <div
-        class=
-            ms-FocusZone
-            &:focus {
-              outline: none;
-            }
-        data-focuszone-id="FocusZone42"
-      >
-        <div>
-          <svg
-            aria-label="Stacked Bar chart example"
-            class=
-
-                {
-                  alignment-adjust: center;
-                  box-sizing: content-box;
-                  display: block;
-                  height: -40px;
-                  overflow: visible;
-                  width: 0px;
-                }
-            focusable="false"
-            viewBox="0 0 0 0"
-          >
-            <g
-              transform="translate(0, -20)"
-            >
-              <g>
-                <path
-                  aria-label="2020/04/30, 20000."
-                  class=
-
-                      {
-                        cursor: default;
-                        fill: #E5E5E5;
-                        outline: transparent;
-                        stroke: #ffffff;
-                      }
-                      &::-moz-focus-inner {
-                        border: 0;
-                      }
-                  d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
-                  data-is-focusable="true"
-                  id="_Pie_41first20000"
-                  opacity="1"
-                  role="img"
-                  tabindex="0"
-                />
-              </g>
-              <g>
-                <path
-                  aria-label="2020/04/20, 39000."
-                  class=
-
-                      {
-                        cursor: default;
-                        fill: #0078D4;
-                        outline: transparent;
-                        stroke: #ffffff;
-                      }
-                      &::-moz-focus-inner {
-                        border: 0;
-                      }
-                  d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
-                  data-is-focusable="true"
-                  id="_Pie_41second39000"
-                  opacity="1"
-                  role="img"
-                  tabindex="-1"
-                />
-              </g>
-              <g>
-                <path
-                  aria-label="2020/04/25, 45000."
-                  class=
-
-                      {
-                        cursor: default;
-                        fill: #DADADA;
-                        outline: transparent;
-                        stroke: #ffffff;
-                      }
-                      &::-moz-focus-inner {
-                        border: 0;
-                      }
-                  d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
-                  data-is-focusable="true"
-                  id="_Pie_41third45000"
-                  opacity="1"
-                  role="img"
-                  tabindex="-1"
-                />
-              </g>
-            </g>
-          </svg>
-        </div>
-      </div>
-      <span
-        class="ms-layer"
-      />
-      <div
-        class=
-
-            {
-              padding-top: 16px;
-              width: 0px;
-            }
-      >
+      <div>
         <div
-          class=
-
-              {
-                align-items: center;
-                margin-bottom: 0;
-                margin-left: -8px;
-                margin-right: 0;
-                margin-top: -8px;
-                white-space: nowrap;
-                width: 100%;
-              }
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
         >
-          <div>
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
             <div
-              style="position: relative;"
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone23"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
             >
               <div
-                data-automation-id="visibleContent"
-                style="position: fixed; visibility: hidden;"
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: center;
+                      position: relative;
+                    }
+                role="group"
               >
                 <div
-                  aria-label="Legends"
-                  aria-multiselectable="false"
-                  class=
-                      ms-FocusZone
-                      &:focus {
-                        outline: none;
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
                       }
-                  data-focuszone-id="FocusZone43"
-                  role="listbox"
+                  role="none"
                 >
-                  <div
-                    class=
-                        ms-OverflowSet
+                  <button
+                    aria-label="first"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
                         {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
                           display: flex;
-                          flex-wrap: wrap;
-                          justify-content: center;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
                           position: relative;
+                          text-transform: capitalize;
                         }
-                    role="group"
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
                   >
                     <div
-                      class=
-                          ms-OverflowSet-item
+                      className=
+
                           {
-                            display: inherit;
-                            flex-shrink: 0;
+                            background-color: #E5E5E5;
+                            border-color: #E5E5E5;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
                           }
-                      role="none"
-                    >
-                      <button
-                        aria-label="first"
-                        aria-posinset="1"
-                        aria-selected="false"
-                        aria-setsize="3"
-                        class=
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #E5E5E5, #E5E5E5);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
 
-                            {
-                              align-items: center;
-                              background: none;
-                              border: none;
-                              cursor: pointer;
-                              display: flex;
-                              outline: transparent;
-                              padding-bottom: 8px;
-                              padding-left: 8px;
-                              padding-right: 8px;
-                              padding-top: 8px;
-                              position: relative;
-                              text-transform: capitalize;
-                            }
-                            &::-moz-focus-inner {
-                              border: 0;
-                            }
-                            .ms-Fabric--isFocusVisible &:focus:after {
-                              border: 1px solid transparent;
-                              bottom: 1px;
-                              content: "";
-                              left: 1px;
-                              outline: 1px solid #a19f9d;
-                              position: absolute;
-                              right: 1px;
-                              top: 1px;
-                              z-index: 1;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                              outline-color: #a19f9d;
-                            }
-                        data-is-focusable="true"
-                        role="option"
-                        tabindex="0"
-                      >
-                        <div
-                          class=
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      first
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="second"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
 
-                              {
-                                background-color: #E5E5E5;
-                                border-color: #E5E5E5;
-                                border: 1px solid;
-                                content: ;
-                                height: 12px;
-                                margin-right: 8px;
-                                width: 12px;
-                              }
-                              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                                content: linear-gradient(to right, #E5E5E5, #E5E5E5);
-                                opacity: ;
-                              }
-                        />
-                        <div
-                          class=
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
 
-                              {
-                                -moz-osx-font-smoothing: grayscale;
-                                -webkit-font-smoothing: antialiased;
-                                color: #f3f2f1;
-                                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                                font-size: 12px;
-                                font-weight: 400;
-                                line-height: 16px;
-                                opacity: ;
-                              }
-                        >
-                          first
-                        </div>
-                      </button>
-                    </div>
+                          {
+                            background-color: #0078D4;
+                            border-color: #0078D4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078D4, #0078D4);
+                            opacity: ;
+                          }
+                    />
                     <div
-                      class=
-                          ms-OverflowSet-item
+                      className=
+
                           {
-                            display: inherit;
-                            flex-shrink: 0;
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
                           }
-                      role="none"
                     >
-                      <button
-                        aria-label="second"
-                        aria-posinset="2"
-                        aria-selected="false"
-                        aria-setsize="3"
-                        class=
-
-                            {
-                              align-items: center;
-                              background: none;
-                              border: none;
-                              cursor: pointer;
-                              display: flex;
-                              outline: transparent;
-                              padding-bottom: 8px;
-                              padding-left: 8px;
-                              padding-right: 8px;
-                              padding-top: 8px;
-                              position: relative;
-                              text-transform: capitalize;
-                            }
-                            &::-moz-focus-inner {
-                              border: 0;
-                            }
-                            .ms-Fabric--isFocusVisible &:focus:after {
-                              border: 1px solid transparent;
-                              bottom: 1px;
-                              content: "";
-                              left: 1px;
-                              outline: 1px solid #a19f9d;
-                              position: absolute;
-                              right: 1px;
-                              top: 1px;
-                              z-index: 1;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                              outline-color: #a19f9d;
-                            }
-                        data-is-focusable="true"
-                        role="option"
-                        tabindex="-1"
-                      >
-                        <div
-                          class=
+                      second
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="third"
+                    aria-posinset={3}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
 
-                              {
-                                background-color: #0078D4;
-                                border-color: #0078D4;
-                                border: 1px solid;
-                                content: ;
-                                height: 12px;
-                                margin-right: 8px;
-                                width: 12px;
-                              }
-                              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                                content: linear-gradient(to right, #0078D4, #0078D4);
-                                opacity: ;
-                              }
-                        />
-                        <div
-                          class=
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
 
-                              {
-                                -moz-osx-font-smoothing: grayscale;
-                                -webkit-font-smoothing: antialiased;
-                                color: #f3f2f1;
-                                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                                font-size: 12px;
-                                font-weight: 400;
-                                line-height: 16px;
-                                opacity: ;
-                              }
-                        >
-                          second
-                        </div>
-                      </button>
-                    </div>
+                          {
+                            background-color: #DADADA;
+                            border-color: #DADADA;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #DADADA, #DADADA);
+                            opacity: ;
+                          }
+                    />
                     <div
-                      class=
-                          ms-OverflowSet-item
+                      className=
+
                           {
-                            display: inherit;
-                            flex-shrink: 0;
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
                           }
-                      role="none"
                     >
-                      <button
-                        aria-label="third"
-                        aria-posinset="3"
-                        aria-selected="false"
-                        aria-setsize="3"
-                        class=
-
-                            {
-                              align-items: center;
-                              background: none;
-                              border: none;
-                              cursor: pointer;
-                              display: flex;
-                              outline: transparent;
-                              padding-bottom: 8px;
-                              padding-left: 8px;
-                              padding-right: 8px;
-                              padding-top: 8px;
-                              position: relative;
-                              text-transform: capitalize;
-                            }
-                            &::-moz-focus-inner {
-                              border: 0;
-                            }
-                            .ms-Fabric--isFocusVisible &:focus:after {
-                              border: 1px solid transparent;
-                              bottom: 1px;
-                              content: "";
-                              left: 1px;
-                              outline: 1px solid #a19f9d;
-                              position: absolute;
-                              right: 1px;
-                              top: 1px;
-                              z-index: 1;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                              outline-color: #a19f9d;
-                            }
-                        data-is-focusable="true"
-                        role="option"
-                        tabindex="-1"
-                      >
-                        <div
-                          class=
-
-                              {
-                                background-color: #DADADA;
-                                border-color: #DADADA;
-                                border: 1px solid;
-                                content: ;
-                                height: 12px;
-                                margin-right: 8px;
-                                width: 12px;
-                              }
-                              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                                content: linear-gradient(to right, #DADADA, #DADADA);
-                                opacity: ;
-                              }
-                        />
-                        <div
-                          class=
-
-                              {
-                                -moz-osx-font-smoothing: grayscale;
-                                -webkit-font-smoothing: antialiased;
-                                color: #f3f2f1;
-                                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                                font-size: 12px;
-                                font-weight: 400;
-                                line-height: 16px;
-                                opacity: ;
-                              }
-                        >
-                          third
-                        </div>
-                      </button>
+                      third
                     </div>
-                  </div>
+                  </button>
                 </div>
               </div>
             </div>
diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx
index 982172e5729a8..5611bc8889648 100644
--- a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx
+++ b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx
@@ -56,7 +56,6 @@ export interface IGroupedVerticalBarChartState extends IBasestate {
   dataPointCalloutProps?: IGVBarChartSeriesPoint;
   callOutAccessibilityData?: IAccessibilityProps;
   calloutLegend: string;
-  emptyChart?: boolean;
 }
 
 export class GroupedVerticalBarChartBase extends React.Component<
@@ -84,6 +83,7 @@ export class GroupedVerticalBarChartBase extends React.Component<
   private _calloutAnchorPoint: IGVBarChartSeriesPoint | null;
   private _barWidth: number;
   private _domainMargin: number;
+  private _emptyChartId: string;
 
   public constructor(props: IGroupedVerticalBarChartProps) {
     super(props);
@@ -100,7 +100,6 @@ export class GroupedVerticalBarChartBase extends React.Component<
       hoverXValue: '',
       calloutLegend: '',
       activeLegend: '',
-      emptyChart: false,
     };
     warnDeprecations(COMPONENT_NAME, props, {
       showYAxisGridLines: 'Dont use this property. Lines are drawn by default',
@@ -113,17 +112,7 @@ export class GroupedVerticalBarChartBase extends React.Component<
     this._calloutId = getId('callout');
     this._tooltipId = getId('GVBCTooltipId_');
     this._domainMargin = MIN_DOMAIN_MARGIN;
-  }
-
-  public componentDidMount(): void {
-    const isChartEmpty = !(
-      this.props.data &&
-      this.props.data.length > 0 &&
-      this.props.data.filter((item: IGroupedVerticalBarChartData) => item.series.length).length > 0
-    );
-    if (this.state.emptyChart !== isChartEmpty) {
-      this.setState({ emptyChart: isChartEmpty });
-    }
+    this._emptyChartId = getId('_GVBC_empty');
   }
 
   public render(): React.ReactNode {
@@ -166,7 +155,7 @@ export class GroupedVerticalBarChartBase extends React.Component<
       tickFormat: this.props.tickFormat!,
     };
 
-    return !this.state.emptyChart ? (
+    return !this._isChartEmpty() ? (
       <CartesianChart
         {...this.props}
         points={this._datasetForBars}
@@ -196,7 +185,12 @@ export class GroupedVerticalBarChartBase extends React.Component<
         }}
       />
     ) : (
-      <div id={getId('_GVBC_')} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />
+      <div
+        id={this._emptyChartId}
+        role={'alert'}
+        style={{ opacity: '0' }}
+        aria-label={'Graph has no data to display'}
+      />
     );
   }
 
@@ -595,4 +589,12 @@ export class GroupedVerticalBarChartBase extends React.Component<
       right: this.margins.right! + this._domainMargin,
     };
   };
+
+  private _isChartEmpty(): boolean {
+    return !(
+      this.props.data &&
+      this.props.data.length > 0 &&
+      this.props.data.filter((item: IGroupedVerticalBarChartData) => item.series.length).length > 0
+    );
+  }
 }
diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx
index f47fc308799bb..419bb0fece3e2 100644
--- a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx
+++ b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx
@@ -38,7 +38,7 @@ function sharedAfterEach() {
   window.requestAnimationFrame = originalRAF;
 }
 
-const chartPoints = [
+export const chartPoints = [
   {
     name: '2000',
     series: [
@@ -87,7 +87,7 @@ const chartPoints = [
   },
 ];
 
-const emptyChartPoints = [
+export const emptyChartPoints = [
   {
     name: 'Empty chart',
     series: [],
diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.test.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.test.tsx
new file mode 100644
index 0000000000000..60911e280ad24
--- /dev/null
+++ b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChartRTL.test.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { queryAllByAttribute, render, waitFor } from '@testing-library/react';
+import { chartPoints, emptyChartPoints } from './GroupedVerticalBarChart.test';
+import { GroupedVerticalBarChart } from './index';
+
+describe('Grouped Vertical Bar chart rendering', () => {
+  test('Should re-render the Grouped Vertical Bar chart with data', async () => {
+    // Arrange
+    const { container, rerender } = render(<GroupedVerticalBarChart data={emptyChartPoints} />);
+    const getById = queryAllByAttribute.bind(null, 'id');
+    // Assert
+    expect(container).toMatchSnapshot();
+    expect(getById(container, /_GVBC_empty/i)).toHaveLength(1);
+    // Act
+    rerender(<GroupedVerticalBarChart data={chartPoints} />);
+    await waitFor(() => {
+      // Assert
+      expect(container).toMatchSnapshot();
+      expect(getById(container, /_GVBC_empty/i)).toHaveLength(0);
+    });
+  });
+});
diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap
index 813b0f62f75a7..eccc78c98f254 100644
--- a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -29,7 +29,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -69,7 +69,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -97,7 +97,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -286,7 +286,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone4"
+              data-focuszone-id="FocusZone5"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -768,7 +768,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -781,7 +781,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -821,7 +821,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -849,7 +849,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -1038,7 +1038,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone4"
+              data-focuszone-id="FocusZone5"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1440,7 +1440,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1453,7 +1453,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1493,7 +1493,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -1521,7 +1521,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -1716,7 +1716,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone4"
+              data-focuszone-id="FocusZone5"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2035,7 +2035,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2048,7 +2048,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2088,7 +2088,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -2116,7 +2116,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -2294,7 +2294,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2610,7 +2610,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2623,7 +2623,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2663,7 +2663,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 315)"
       />
       <g
@@ -2691,7 +2691,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -2862,7 +2862,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2875,7 +2875,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2915,7 +2915,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -2943,7 +2943,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -3138,7 +3138,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone4"
+              data-focuszone-id="FocusZone5"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3457,7 +3457,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3470,7 +3470,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3510,7 +3510,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -3538,7 +3538,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -3733,7 +3733,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone4"
+              data-focuszone-id="FocusZone5"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4052,7 +4052,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4065,7 +4065,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -4105,7 +4105,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -4133,7 +4133,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -4328,7 +4328,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone4"
+              data-focuszone-id="FocusZone5"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4647,7 +4647,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4660,7 +4660,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -4700,7 +4700,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -4728,7 +4728,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -4923,7 +4923,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone4"
+              data-focuszone-id="FocusZone5"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap
new file mode 100644
index 0000000000000..3bd8ef6e150d3
--- /dev/null
+++ b/packages/react-charting/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChartRTL.test.tsx.snap
@@ -0,0 +1,5769 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Grouped Vertical Bar chart rendering Should re-render the Grouped Vertical Bar chart with data 1`] = `
+<div>
+  <div
+    aria-label="Graph has no data to display"
+    id="_GVBC_empty5"
+    role="alert"
+    style="opacity: 0;"
+  />
+</div>
+`;
+
+exports[`Grouped Vertical Bar chart rendering Should re-render the Grouped Vertical Bar chart with data 2`] = `
+<div>
+  <div
+    class=
+
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          display: flex;
+          flex-direction: column;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: 100%;
+          overflow: hidden;
+          width: 100%;
+        }
+    id="chart_6"
+    role="presentation"
+  >
+    <div
+      class=
+          ms-FocusZone
+          &:focus {
+            outline: none;
+          }
+          {
+            overflow: auto;
+          }
+      data-focuszone-id="FocusZone7"
+    >
+      <svg
+        focusable="false"
+        height="0"
+        style="display: block;"
+        width="0"
+      >
+        <g
+          class=
+
+              & text {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                fill: #323130;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 10px;
+                font-weight: 600;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                fill: rgb(179, 179, 179);
+              }
+              & line {
+                opacity: 0.2;
+                stroke: #323130;
+                width: 1px;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+                opacity: 0.1;
+                stroke: rgb(179, 179, 179);
+              }
+              & path {
+                display: none;
+              }
+          id="xAxisGElementchart_6"
+          transform="translate(0, -35)"
+        />
+        <g
+          class=
+
+              & text {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                fill: #323130;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 10px;
+                font-weight: 600;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                fill: rgb(179, 179, 179);
+              }
+              & path {
+                display: none;
+              }
+              & line {
+                opacity: 0.2;
+                stroke: #323130;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+                opacity: 0.1;
+                stroke: rgb(179, 179, 179);
+              }
+          id="yAxisGElementchart_6"
+          transform="translate(40, 0)"
+        />
+        <g>
+          <g
+            transform="translate(19, 0)"
+          >
+            <rect
+              aria-label="2000. MetaData1, 66."
+              class=
+
+                  {
+                    cursor: default;
+                  }
+              data-is-focusable="true"
+              fill="#0078d4"
+              height="0"
+              opacity=""
+              role="img"
+              tabindex="0"
+              width="-9"
+              x="0"
+              y="4.45652173913043"
+            />
+            <rect
+              aria-label="2000. MetaData2, 13."
+              class=
+
+                  {
+                    cursor: default;
+                  }
+              data-is-focusable="true"
+              fill="#00188f"
+              height="0"
+              opacity=""
+              role="img"
+              tabindex="-1"
+              width="-9"
+              x="10"
+              y="0"
+            />
+            <rect
+              aria-label="2000. MetaData3, 34."
+              class=
+
+                  {
+                    cursor: default;
+                  }
+              data-is-focusable="true"
+              fill="#00bcf2"
+              height="0"
+              opacity=""
+              role="img"
+              tabindex="-1"
+              width="-9"
+              x="20"
+              y="0"
+            />
+          </g>
+          <g
+            transform="translate(-28, 0)"
+          >
+            <rect
+              aria-label="2010. MetaData1, 14."
+              class=
+
+                  {
+                    cursor: default;
+                  }
+              data-is-focusable="true"
+              fill="#0078d4"
+              height="0"
+              opacity=""
+              role="img"
+              tabindex="-1"
+              width="-9"
+              x="0"
+              y="0"
+            />
+            <rect
+              aria-label="2010. MetaData2, 90."
+              class=
+
+                  {
+                    cursor: default;
+                  }
+              data-is-focusable="true"
+              fill="#00188f"
+              height="0"
+              opacity=""
+              role="img"
+              tabindex="-1"
+              width="-9"
+              x="10"
+              y="18.80434782608696"
+            />
+            <rect
+              aria-label="2010. MetaData3, 33."
+              class=
+
+                  {
+                    cursor: default;
+                  }
+              data-is-focusable="true"
+              fill="#00bcf2"
+              height="0"
+              opacity=""
+              role="img"
+              tabindex="-1"
+              width="-9"
+              x="20"
+              y="0"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+    <div
+      class=
+
+          {
+            margin-left: 20px;
+            margin-top: 8px;
+          }
+    >
+      <div
+        class=
+
+            {
+              align-items: center;
+              margin-bottom: 0;
+              margin-left: -8px;
+              margin-right: 0;
+              margin-top: -8px;
+              white-space: nowrap;
+              width: 100%;
+            }
+      >
+        <div>
+          <div
+            style="position: relative;"
+          >
+            <div
+              data-automation-id="visibleContent"
+              style="position: fixed; visibility: hidden;"
+            >
+              <div
+                aria-label="Legends"
+                aria-multiselectable="false"
+                class=
+                    ms-FocusZone
+                    &:focus {
+                      outline: none;
+                    }
+                data-focuszone-id="FocusZone8"
+                role="listbox"
+              >
+                <div
+                  class=
+                      ms-OverflowSet
+                      {
+                        display: flex;
+                        flex-wrap: wrap;
+                        justify-content: unset;
+                        position: relative;
+                      }
+                  role="group"
+                >
+                  <div
+                    class=
+                        ms-OverflowSet-item
+                        {
+                          display: inherit;
+                          flex-shrink: 0;
+                        }
+                    role="none"
+                  >
+                    <button
+                      aria-label="MetaData1"
+                      aria-posinset="1"
+                      aria-selected="false"
+                      aria-setsize="3"
+                      class=
+
+                          {
+                            align-items: center;
+                            background: none;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            outline: transparent;
+                            padding-bottom: 8px;
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            padding-top: 8px;
+                            position: relative;
+                            text-transform: capitalize;
+                          }
+                          &::-moz-focus-inner {
+                            border: 0;
+                          }
+                          .ms-Fabric--isFocusVisible &:focus:after {
+                            border: 1px solid transparent;
+                            bottom: 1px;
+                            content: "";
+                            left: 1px;
+                            outline: 1px solid #605e5c;
+                            position: absolute;
+                            right: 1px;
+                            top: 1px;
+                            z-index: 1;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                            outline-color: #605e5c;
+                          }
+                      data-is-focusable="true"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class=
+
+                            {
+                              background-color: #0078d4;
+                              border-color: #0078d4;
+                              border: 1px solid;
+                              content: ;
+                              height: 12px;
+                              margin-right: 8px;
+                              width: 12px;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                              content: linear-gradient(to right, #0078d4, #0078d4);
+                              opacity: ;
+                            }
+                      />
+                      <div
+                        class=
+
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              color: #323130;
+                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                              font-size: 12px;
+                              font-weight: 400;
+                              line-height: 16px;
+                              opacity: ;
+                            }
+                      >
+                        MetaData1
+                      </div>
+                    </button>
+                  </div>
+                  <div
+                    class=
+                        ms-OverflowSet-item
+                        {
+                          display: inherit;
+                          flex-shrink: 0;
+                        }
+                    role="none"
+                  >
+                    <button
+                      aria-label="MetaData2"
+                      aria-posinset="2"
+                      aria-selected="false"
+                      aria-setsize="3"
+                      class=
+
+                          {
+                            align-items: center;
+                            background: none;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            outline: transparent;
+                            padding-bottom: 8px;
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            padding-top: 8px;
+                            position: relative;
+                            text-transform: capitalize;
+                          }
+                          &::-moz-focus-inner {
+                            border: 0;
+                          }
+                          .ms-Fabric--isFocusVisible &:focus:after {
+                            border: 1px solid transparent;
+                            bottom: 1px;
+                            content: "";
+                            left: 1px;
+                            outline: 1px solid #605e5c;
+                            position: absolute;
+                            right: 1px;
+                            top: 1px;
+                            z-index: 1;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                            outline-color: #605e5c;
+                          }
+                      data-is-focusable="true"
+                      role="option"
+                      tabindex="-1"
+                    >
+                      <div
+                        class=
+
+                            {
+                              background-color: #00188f;
+                              border-color: #00188f;
+                              border: 1px solid;
+                              content: ;
+                              height: 12px;
+                              margin-right: 8px;
+                              width: 12px;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                              content: linear-gradient(to right, #00188f, #00188f);
+                              opacity: ;
+                            }
+                      />
+                      <div
+                        class=
+
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              color: #323130;
+                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                              font-size: 12px;
+                              font-weight: 400;
+                              line-height: 16px;
+                              opacity: ;
+                            }
+                      >
+                        MetaData2
+                      </div>
+                    </button>
+                  </div>
+                  <div
+                    class=
+                        ms-OverflowSet-item
+                        {
+                          display: inherit;
+                          flex-shrink: 0;
+                        }
+                    role="none"
+                  >
+                    <button
+                      aria-label="MetaData3"
+                      aria-posinset="3"
+                      aria-selected="false"
+                      aria-setsize="3"
+                      class=
+
+                          {
+                            align-items: center;
+                            background: none;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            outline: transparent;
+                            padding-bottom: 8px;
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            padding-top: 8px;
+                            position: relative;
+                            text-transform: capitalize;
+                          }
+                          &::-moz-focus-inner {
+                            border: 0;
+                          }
+                          .ms-Fabric--isFocusVisible &:focus:after {
+                            border: 1px solid transparent;
+                            bottom: 1px;
+                            content: "";
+                            left: 1px;
+                            outline: 1px solid #605e5c;
+                            position: absolute;
+                            right: 1px;
+                            top: 1px;
+                            z-index: 1;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                            outline-color: #605e5c;
+                          }
+                      data-is-focusable="true"
+                      role="option"
+                      tabindex="-1"
+                    >
+                      <div
+                        class=
+
+                            {
+                              background-color: #00bcf2;
+                              border-color: #00bcf2;
+                              border: 1px solid;
+                              content: ;
+                              height: 12px;
+                              margin-right: 8px;
+                              width: 12px;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                              content: linear-gradient(to right, #00bcf2, #00bcf2);
+                              opacity: ;
+                            }
+                      />
+                      <div
+                        class=
+
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              color: #323130;
+                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                              font-size: 12px;
+                              font-weight: 400;
+                              line-height: 16px;
+                              opacity: ;
+                            }
+                      >
+                        MetaData3
+                      </div>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <span
+      class="ms-layer"
+    />
+  </div>
+</div>
+`;
+
+exports[`GroupedVerticalBarChart - mouse events Should render callout correctly on mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0"
+          transform="translate(19, 0)"
+        >
+          <rect
+            aria-label="2000. MetaData1, 66."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={182.93478260869566}
+            key="0-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={92.06521739130434}
+          />
+          <rect
+            aria-label="2000. MetaData2, 13."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={36.03260869565217}
+            key="0-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={238.9673913043478}
+          />
+          <rect
+            aria-label="2000. MetaData3, 34."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={94.23913043478261}
+            key="0-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={180.76086956521738}
+          />
+        </g>
+        <g
+          key="1"
+          transform="translate(-28, 0)"
+        >
+          <rect
+            aria-label="2010. MetaData1, 14."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={38.80434782608696}
+            key="1-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={236.19565217391303}
+          />
+          <rect
+            aria-label="2010. MetaData2, 90."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={249.45652173913044}
+            key="1-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={25.543478260869563}
+          />
+          <rect
+            aria-label="2010. MetaData3, 33."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={91.46739130434783}
+            key="1-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={183.5326086956522}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone5"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="1"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData2
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="2"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData3"
+                    aria-posinset={3}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00bcf2;
+                            border-color: #00bcf2;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00bcf2, #00bcf2);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData3
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+          {
+            animation-duration: 0.367s;
+            animation-fill-mode: both;
+            animation-name: keyframes from{opacity:0;}to{opacity:1;} keyframes from{transform:translate3d(0,-10px,0);pointer-events:none;}to{transform:translate3d(0,0,0);pointer-events:auto;};
+            animation-timing-function: cubic-bezier(.1,.9,.2,1);
+          }
+      data-is-focusable={false}
+      hidden={false}
+      id="toolTipcallout0"
+      style={
+        Object {
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="text"
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div
+          className=
+
+              {
+                background-blend-mode: normal, luminosity;
+                background-color: #ffffff;
+                display: grid;
+                overflow: hidden;
+                padding-bottom: 10px;
+                padding-left: 16px;
+                padding-right: 16px;
+                padding-top: 11px;
+              }
+        >
+          <div
+            className=
+
+                {
+                  display: flex;
+                  flex-direction: row;
+                  justify-content: space-between;
+                }
+          >
+            <div
+              className=
+
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #605e5c;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 12px;
+                    font-weight: 400;
+                    line-height: 16px;
+                    opacity: 0.8;
+                  }
+            >
+               
+            </div>
+          </div>
+          <div
+            className=""
+          >
+            <div
+              className=
+
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    border-left: 4px solid #0078d4;
+                    color: #323130;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 28px;
+                    font-weight: 600;
+                    line-height: 22px;
+                    margin-top: unset;
+                    padding-left: 8px;
+                  }
+            >
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #0078d4;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 28px;
+                      font-weight: bold;
+                      line-height: 36px;
+                    }
+              >
+                66
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`GroupedVerticalBarChart - mouse events Should render customized callout on mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0"
+          transform="translate(19, 0)"
+        >
+          <rect
+            aria-label="2000. MetaData1, 66."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={182.93478260869566}
+            key="0-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={92.06521739130434}
+          />
+          <rect
+            aria-label="2000. MetaData2, 13."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={36.03260869565217}
+            key="0-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={238.9673913043478}
+          />
+          <rect
+            aria-label="2000. MetaData3, 34."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={94.23913043478261}
+            key="0-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={180.76086956521738}
+          />
+        </g>
+        <g
+          key="1"
+          transform="translate(-28, 0)"
+        >
+          <rect
+            aria-label="2010. MetaData1, 14."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={38.80434782608696}
+            key="1-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={236.19565217391303}
+          />
+          <rect
+            aria-label="2010. MetaData2, 90."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={249.45652173913044}
+            key="1-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={25.543478260869563}
+          />
+          <rect
+            aria-label="2010. MetaData3, 33."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={91.46739130434783}
+            key="1-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={183.5326086956522}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone5"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="1"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData2
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="2"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData3"
+                    aria-posinset={3}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00bcf2;
+                            border-color: #00bcf2;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00bcf2, #00bcf2);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData3
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+          {
+            animation-duration: 0.367s;
+            animation-fill-mode: both;
+            animation-name: keyframes from{opacity:0;}to{opacity:1;} keyframes from{transform:translate3d(0,-10px,0);pointer-events:none;}to{transform:translate3d(0,0,0);pointer-events:auto;};
+            animation-timing-function: cubic-bezier(.1,.9,.2,1);
+          }
+      data-is-focusable={false}
+      hidden={false}
+      id="toolTipcallout0"
+      style={
+        Object {
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="text"
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div>
+          <pre>
+            {
+  "key": "series1",
+  "data": 66,
+  "color": "#0078d4",
+  "legend": "MetaData1"
+}
+          </pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChart correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0"
+          transform="translate(19, 0)"
+        >
+          <rect
+            aria-label="2000. MetaData1, 66."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={182.93478260869566}
+            key="0-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={92.06521739130434}
+          />
+          <rect
+            aria-label="2000. MetaData2, 13."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={36.03260869565217}
+            key="0-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={238.9673913043478}
+          />
+          <rect
+            aria-label="2000. MetaData3, 34."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={94.23913043478261}
+            key="0-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={180.76086956521738}
+          />
+        </g>
+        <g
+          key="1"
+          transform="translate(-28, 0)"
+        >
+          <rect
+            aria-label="2010. MetaData1, 14."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={38.80434782608696}
+            key="1-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={236.19565217391303}
+          />
+          <rect
+            aria-label="2010. MetaData2, 90."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={249.45652173913044}
+            key="1-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={25.543478260869563}
+          />
+          <rect
+            aria-label="2010. MetaData3, 33."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={91.46739130434783}
+            key="1-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={183.5326086956522}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone5"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="1"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData2
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="2"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData3"
+                    aria-posinset={3}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00bcf2;
+                            border-color: #00bcf2;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00bcf2, #00bcf2);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData3
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLines correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0"
+          transform="translate(19, 0)"
+        >
+          <rect
+            aria-label="2000. MetaData1, 66."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={182.93478260869566}
+            key="0-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={92.06521739130434}
+          />
+          <rect
+            aria-label="2000. MetaData2, 13."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={36.03260869565217}
+            key="0-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={238.9673913043478}
+          />
+          <rect
+            aria-label="2000. MetaData3, 34."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={94.23913043478261}
+            key="0-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={180.76086956521738}
+          />
+        </g>
+        <g
+          key="1"
+          transform="translate(-28, 0)"
+        >
+          <rect
+            aria-label="2010. MetaData1, 14."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={38.80434782608696}
+            key="1-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={236.19565217391303}
+          />
+          <rect
+            aria-label="2010. MetaData2, 90."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={249.45652173913044}
+            key="1-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={25.543478260869563}
+          />
+          <rect
+            aria-label="2010. MetaData3, 33."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={91.46739130434783}
+            key="1-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={183.5326086956522}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div
+        aria-label="Legends"
+        aria-multiselectable={false}
+        className=
+            ms-FocusZone
+            &:focus {
+              outline: none;
+            }
+        data-focuszone-id="FocusZone5"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDownCapture={[Function]}
+        role="listbox"
+      >
+        <div
+          className=
+              ms-OverflowSet
+              {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: unset;
+                position: relative;
+              }
+          role="group"
+        >
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="0"
+            role="none"
+          >
+            <button
+              aria-label="MetaData1"
+              aria-posinset={1}
+              aria-selected={false}
+              aria-setsize={3}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #0078d4;
+                      border-color: #0078d4;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #0078d4, #0078d4);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                MetaData1
+              </div>
+            </button>
+          </div>
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="1"
+            role="none"
+          >
+            <button
+              aria-label="MetaData2"
+              aria-posinset={2}
+              aria-selected={false}
+              aria-setsize={3}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #00188f;
+                      border-color: #00188f;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #00188f, #00188f);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                MetaData2
+              </div>
+            </button>
+          </div>
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="2"
+            role="none"
+          >
+            <button
+              aria-label="MetaData3"
+              aria-posinset={3}
+              aria-selected={false}
+              aria-setsize={3}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #00bcf2;
+                      border-color: #00bcf2;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #00bcf2, #00bcf2);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                MetaData3
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={350}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 315)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0"
+          transform="translate(19, 0)"
+        >
+          <rect
+            aria-label="2000. MetaData1, 66."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={211.6304347826087}
+            key="0-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={103.36956521739131}
+          />
+          <rect
+            aria-label="2000. MetaData2, 13."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={41.68478260869565}
+            key="0-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={273.3152173913044}
+          />
+          <rect
+            aria-label="2000. MetaData3, 34."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={109.02173913043478}
+            key="0-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={205.97826086956522}
+          />
+        </g>
+        <g
+          key="1"
+          transform="translate(-28, 0)"
+        >
+          <rect
+            aria-label="2010. MetaData1, 14."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={44.89130434782609}
+            key="1-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={270.1086956521739}
+          />
+          <rect
+            aria-label="2010. MetaData2, 90."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={288.5869565217391}
+            key="1-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={26.413043478260875}
+          />
+          <rect
+            aria-label="2010. MetaData3, 33."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={105.81521739130434}
+            key="1-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={209.18478260869566}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0"
+          transform="translate(19, 0)"
+        >
+          <rect
+            aria-label="2000. MetaData1, 66."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={false}
+            fill="#0078d4"
+            height={182.93478260869566}
+            key="0-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={92.06521739130434}
+          />
+          <rect
+            aria-label="2000. MetaData2, 13."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={false}
+            fill="#00188f"
+            height={36.03260869565217}
+            key="0-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={238.9673913043478}
+          />
+          <rect
+            aria-label="2000. MetaData3, 34."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={false}
+            fill="#00bcf2"
+            height={94.23913043478261}
+            key="0-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={180.76086956521738}
+          />
+        </g>
+        <g
+          key="1"
+          transform="translate(-28, 0)"
+        >
+          <rect
+            aria-label="2010. MetaData1, 14."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={false}
+            fill="#0078d4"
+            height={38.80434782608696}
+            key="1-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={236.19565217391303}
+          />
+          <rect
+            aria-label="2010. MetaData2, 90."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={false}
+            fill="#00188f"
+            height={249.45652173913044}
+            key="1-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={25.543478260869563}
+          />
+          <rect
+            aria-label="2010. MetaData3, 33."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={false}
+            fill="#00bcf2"
+            height={91.46739130434783}
+            key="1-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={183.5326086956522}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone5"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="1"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData2
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="2"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData3"
+                    aria-posinset={3}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00bcf2;
+                            border-color: #00bcf2;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00bcf2, #00bcf2);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData3
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0"
+          transform="translate(19, 0)"
+        >
+          <rect
+            aria-label="2000. MetaData1, 66."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={182.93478260869566}
+            key="0-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={92.06521739130434}
+          />
+          <rect
+            aria-label="2000. MetaData2, 13."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={36.03260869565217}
+            key="0-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={238.9673913043478}
+          />
+          <rect
+            aria-label="2000. MetaData3, 34."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={94.23913043478261}
+            key="0-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={180.76086956521738}
+          />
+        </g>
+        <g
+          key="1"
+          transform="translate(-28, 0)"
+        >
+          <rect
+            aria-label="2010. MetaData1, 14."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={38.80434782608696}
+            key="1-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={236.19565217391303}
+          />
+          <rect
+            aria-label="2010. MetaData2, 90."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={249.45652173913044}
+            key="1-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={25.543478260869563}
+          />
+          <rect
+            aria-label="2010. MetaData3, 33."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={91.46739130434783}
+            key="1-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={183.5326086956522}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone5"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="1"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData2
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="2"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData3"
+                    aria-posinset={3}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00bcf2;
+                            border-color: #00bcf2;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00bcf2, #00bcf2);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData3
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0"
+          transform="translate(19, 0)"
+        >
+          <rect
+            aria-label="2000. MetaData1, 66."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={182.93478260869566}
+            key="0-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={92.06521739130434}
+          />
+          <rect
+            aria-label="2000. MetaData2, 13."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={36.03260869565217}
+            key="0-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={238.9673913043478}
+          />
+          <rect
+            aria-label="2000. MetaData3, 34."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={94.23913043478261}
+            key="0-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={180.76086956521738}
+          />
+        </g>
+        <g
+          key="1"
+          transform="translate(-28, 0)"
+        >
+          <rect
+            aria-label="2010. MetaData1, 14."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={38.80434782608696}
+            key="1-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={236.19565217391303}
+          />
+          <rect
+            aria-label="2010. MetaData2, 90."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={249.45652173913044}
+            key="1-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={25.543478260869563}
+          />
+          <rect
+            aria-label="2010. MetaData3, 33."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={91.46739130434783}
+            key="1-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={183.5326086956522}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone5"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="1"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData2
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="2"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData3"
+                    aria-posinset={3}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00bcf2;
+                            border-color: #00bcf2;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00bcf2, #00bcf2);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData3
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0"
+          transform="translate(19, 0)"
+        >
+          <rect
+            aria-label="2000. MetaData1, 66."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={182.93478260869566}
+            key="0-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={92.06521739130434}
+          />
+          <rect
+            aria-label="2000. MetaData2, 13."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={36.03260869565217}
+            key="0-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={238.9673913043478}
+          />
+          <rect
+            aria-label="2000. MetaData3, 34."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={94.23913043478261}
+            key="0-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={180.76086956521738}
+          />
+        </g>
+        <g
+          key="1"
+          transform="translate(-28, 0)"
+        >
+          <rect
+            aria-label="2010. MetaData1, 14."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#0078d4"
+            height={38.80434782608696}
+            key="1-0"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={0}
+            y={236.19565217391303}
+          />
+          <rect
+            aria-label="2010. MetaData2, 90."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00188f"
+            height={249.45652173913044}
+            key="1-1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={10}
+            y={25.543478260869563}
+          />
+          <rect
+            aria-label="2010. MetaData3, 33."
+            className=
+
+                {
+                  cursor: default;
+                }
+            data-is-focusable={true}
+            fill="#00bcf2"
+            height={91.46739130434783}
+            key="1-2"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity=""
+            role="img"
+            width={-9}
+            x={20}
+            y={183.5326086956522}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone5"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="1"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData2
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="2"
+                  role="none"
+                >
+                  <button
+                    aria-label="MetaData3"
+                    aria-posinset={3}
+                    aria-selected={false}
+                    aria-setsize={3}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00bcf2;
+                            border-color: #00bcf2;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00bcf2, #00bcf2);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      MetaData3
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
diff --git a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx
index 007a2361cafa8..349ecc79b7477 100644
--- a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx
+++ b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx
@@ -86,11 +86,6 @@ export interface IHeatMapChartState {
    * Accessibility data for callout
    */
   callOutAccessibilityData?: IAccessibilityProps;
-
-  /**
-   * Check for empty chart accessibility
-   */
-  emptyChart?: boolean;
 }
 const getClassNames = classNamesFunction<IHeatMapChartStyleProps, IHeatMapChartStyles>();
 export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatMapChartState> {
@@ -119,6 +114,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
   private _xAxisType: XAxisTypes;
   private _yAxisType: YAxisType;
   private _calloutAnchorPoint: FlattenData | null;
+  private _emptyChartId: string;
   public constructor(props: IHeatMapChartProps) {
     super(props);
     const { x, y } = this._getXandY();
@@ -151,15 +147,8 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
       ratio: null,
       descriptionMessage: '',
       calloutId: '',
-      emptyChart: false,
     };
-  }
-
-  public componentDidMount(): void {
-    const isChartEmpty: boolean = !(this.props.data && this.props.data.length > 0);
-    if (this.state.emptyChart !== isChartEmpty) {
-      this.setState({ emptyChart: isChartEmpty });
-    }
+    this._emptyChartId = getId('_HeatMap_empty');
   }
 
   public render(): React.ReactNode {
@@ -199,7 +188,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
       }),
       descriptionMessage: this.state.descriptionMessage,
     };
-    return !this.state.emptyChart ? (
+    return !this._isChartEmpty() ? (
       <CartesianChart
         {...this.props}
         points={data}
@@ -230,7 +219,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
       />
     ) : (
       <div
-        id={getId('_HeatMap_')}
+        id={this._emptyChartId}
         role={'alert'}
         style={{ opacity: '0' }}
         aria-label={'Graph has no data to display'}
@@ -705,4 +694,8 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
       `${xValue}, ${yValue}. ${legend}, ${zValue}.` + (description ? ` ${description}.` : '')
     );
   };
+
+  private _isChartEmpty(): boolean {
+    return !(this.props.data && this.props.data.length > 0);
+  }
 }
diff --git a/packages/react-charting/src/components/HeatMapChart/HeatMapChartRTL.test.tsx b/packages/react-charting/src/components/HeatMapChart/HeatMapChartRTL.test.tsx
new file mode 100644
index 0000000000000..484a8a314dbd9
--- /dev/null
+++ b/packages/react-charting/src/components/HeatMapChart/HeatMapChartRTL.test.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { queryAllByAttribute, render, waitFor } from '@testing-library/react';
+import { HeatMapChart, IHeatMapChartProps } from './index';
+
+const yPoint: string[] = ['p1', 'p2'];
+
+const xPoint: string[] = [new Date('2020-03-03').toISOString(), new Date('2020-03-04').toISOString()];
+export const HeatMapData: IHeatMapChartProps['data'] = [
+  {
+    value: 100,
+    legend: 'Execllent (0-200)',
+    data: [
+      {
+        x: xPoint[0],
+        y: yPoint[0],
+        value: 50,
+        rectText: 50,
+        ratio: [50, 2391],
+        descriptionMessage: 'a good day to start with in Texas with best air quality',
+      },
+      {
+        x: xPoint[1],
+        y: yPoint[1],
+        value: 25,
+        rectText: 25,
+        ratio: [25, 2479],
+        descriptionMessage: `Due to unexpected heavy rain, all the pollutants are washed
+        off and people of alaska are hoping for more of this days`,
+      },
+    ],
+  },
+];
+
+describe('HeatMap chart rendering', () => {
+  test('Should re-render the HeatMap chart with data', async () => {
+    // Arrange
+    const { container, rerender } = render(
+      <HeatMapChart
+        data={[]}
+        domainValuesForColorScale={[0, 600]}
+        rangeValuesForColorScale={['lightblue', 'darkblue']}
+      />,
+    );
+    const getById = queryAllByAttribute.bind(null, 'id');
+    // Assert
+    expect(container).toMatchSnapshot();
+    expect(getById(container, /_HeatMap_empty/i)).toHaveLength(1);
+    // Act
+    rerender(
+      <HeatMapChart
+        data={HeatMapData}
+        domainValuesForColorScale={[0, 600]}
+        rangeValuesForColorScale={['lightblue', 'darkblue']}
+      />,
+    );
+    await waitFor(() => {
+      // Assert
+      expect(container).toMatchSnapshot();
+      expect(getById(container, /_HeatMap_empty/i)).toHaveLength(0);
+    });
+  });
+});
diff --git a/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap b/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap
index 92ee1fa981fcf..78a1e9731e086 100644
--- a/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap
+++ b/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChart.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove
         overflow: hidden;
         width: 100%;
       }
-  id="chart_0"
+  id="chart_1"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -29,7 +29,7 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone1"
+    data-focuszone-id="FocusZone2"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -69,7 +69,7 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove
             & path {
               display: none;
             }
-        id="xAxisGElementchart_0"
+        id="xAxisGElementchart_1"
         transform="translate(0, 275)"
       />
       <g
@@ -97,7 +97,7 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_0"
+        id="yAxisGElementchart_1"
         transform="translate(40, 0)"
       />
       <g
@@ -215,7 +215,7 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone2"
+              data-focuszone-id="FocusZone3"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -573,7 +573,7 @@ exports[`HeatMapChart snapShot testing renders HeatMapChart correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_0"
+  id="chart_1"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -586,7 +586,7 @@ exports[`HeatMapChart snapShot testing renders HeatMapChart correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone1"
+    data-focuszone-id="FocusZone2"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -626,7 +626,7 @@ exports[`HeatMapChart snapShot testing renders HeatMapChart correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_0"
+        id="xAxisGElementchart_1"
         transform="translate(0, 275)"
       />
       <g
@@ -654,7 +654,7 @@ exports[`HeatMapChart snapShot testing renders HeatMapChart correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_0"
+        id="yAxisGElementchart_1"
         transform="translate(40, 0)"
       />
       <g
@@ -778,7 +778,7 @@ exports[`HeatMapChart snapShot testing renders HeatMapChart correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone2"
+              data-focuszone-id="FocusZone3"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -915,7 +915,7 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr
         overflow: hidden;
         width: 100%;
       }
-  id="chart_0"
+  id="chart_1"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -928,7 +928,7 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone1"
+    data-focuszone-id="FocusZone2"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -968,7 +968,7 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr
             & path {
               display: none;
             }
-        id="xAxisGElementchart_0"
+        id="xAxisGElementchart_1"
         transform="translate(0, 275)"
       />
       <g
@@ -996,7 +996,7 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_0"
+        id="yAxisGElementchart_1"
         transform="translate(40, 0)"
       />
       <g
@@ -1120,7 +1120,7 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone2"
+              data-focuszone-id="FocusZone3"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1348,7 +1348,7 @@ exports[`HeatMapChart snapShot testing renders hideLegend correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_0"
+  id="chart_1"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1361,7 +1361,7 @@ exports[`HeatMapChart snapShot testing renders hideLegend correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone1"
+    data-focuszone-id="FocusZone2"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1401,7 +1401,7 @@ exports[`HeatMapChart snapShot testing renders hideLegend correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_0"
+        id="xAxisGElementchart_1"
         transform="translate(0, 315)"
       />
       <g
@@ -1429,7 +1429,7 @@ exports[`HeatMapChart snapShot testing renders hideLegend correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_0"
+        id="yAxisGElementchart_1"
         transform="translate(40, 0)"
       />
       <g
@@ -1529,7 +1529,7 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_0"
+  id="chart_1"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1542,7 +1542,7 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone1"
+    data-focuszone-id="FocusZone2"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1582,7 +1582,7 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_0"
+        id="xAxisGElementchart_1"
         transform="translate(0, 275)"
       />
       <g
@@ -1610,7 +1610,7 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_0"
+        id="yAxisGElementchart_1"
         transform="translate(40, 0)"
       />
       <g
@@ -1734,7 +1734,7 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone2"
+              data-focuszone-id="FocusZone3"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1871,7 +1871,7 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_0"
+  id="chart_1"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1884,7 +1884,7 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone1"
+    data-focuszone-id="FocusZone2"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1924,7 +1924,7 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_0"
+        id="xAxisGElementchart_1"
         transform="translate(0, 275)"
       />
       <g
@@ -1952,7 +1952,7 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_0"
+        id="yAxisGElementchart_1"
         transform="translate(40, 0)"
       />
       <g
@@ -2076,7 +2076,7 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone2"
+              data-focuszone-id="FocusZone3"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChartRTL.test.tsx.snap b/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChartRTL.test.tsx.snap
new file mode 100644
index 0000000000000..e5a964a816edd
--- /dev/null
+++ b/packages/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChartRTL.test.tsx.snap
@@ -0,0 +1,324 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HeatMap chart rendering Should re-render the HeatMap chart with data 1`] = `
+<div>
+  <div
+    aria-label="Graph has no data to display"
+    id="_HeatMap_empty0"
+    role="alert"
+    style="opacity: 0;"
+  />
+</div>
+`;
+
+exports[`HeatMap chart rendering Should re-render the HeatMap chart with data 2`] = `
+<div>
+  <div
+    class=
+
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          display: flex;
+          flex-direction: column;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: 100%;
+          overflow: hidden;
+          width: 100%;
+        }
+    id="chart_1"
+    role="presentation"
+  >
+    <div
+      class=
+          ms-FocusZone
+          &:focus {
+            outline: none;
+          }
+          {
+            overflow: auto;
+          }
+      data-focuszone-id="FocusZone2"
+    >
+      <svg
+        focusable="false"
+        height="0"
+        style="display: block;"
+        width="0"
+      >
+        <g
+          class=
+
+              & text {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                fill: #323130;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 10px;
+                font-weight: 600;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                fill: rgb(179, 179, 179);
+              }
+              & line {
+                opacity: 0.2;
+                stroke: #323130;
+                width: 1px;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+                opacity: 0.1;
+                stroke: rgb(179, 179, 179);
+              }
+              & path {
+                display: none;
+              }
+          id="xAxisGElementchart_1"
+          transform="translate(0, -35)"
+        />
+        <g
+          class=
+
+              & text {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                fill: #323130;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 10px;
+                font-weight: 600;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                fill: rgb(179, 179, 179);
+              }
+              & path {
+                display: none;
+              }
+              & line {
+                opacity: 0.2;
+                stroke: #323130;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+                opacity: 0.1;
+                stroke: rgb(179, 179, 179);
+              }
+          id="yAxisGElementchart_1"
+          transform="translate(40, 0)"
+        />
+        <g
+          aria-label="2020-03-04T00:00:00.000Z, p2. Execllent (0-200), 25/2479. Due to unexpected heavy rain, all the pollutants are washed
+        off and people of alaska are hoping for more of this days."
+          data-is-focusable="true"
+          fill-opacity="1"
+          role="img"
+          tabindex="0"
+          transform="translate(-19.405940594059405, -7.227722772277229)"
+        >
+          <rect
+            fill="rgb(166, 207, 226)"
+            height="26.683168316831683"
+            width="29.10891089108911"
+          />
+          <text
+            class=
+
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  fill: #ffffff;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 600;
+                  pointer-events: none;
+                }
+            dominant-baseline="middle"
+            text-anchor="middle"
+            transform="translate(14.554455445544555, 13.341584158415841)"
+          >
+            25
+          </text>
+        </g>
+        <g
+          aria-label="2020-03-03T00:00:00.000Z, p1. Execllent (0-200), 50/2391. a good day to start with in Texas with best air quality."
+          data-is-focusable="true"
+          fill-opacity="1"
+          role="img"
+          tabindex="-1"
+          transform="translate(10.297029702970299, -34.45544554455446)"
+        >
+          <rect
+            fill="rgb(159, 198, 222)"
+            height="26.683168316831683"
+            width="29.10891089108911"
+          />
+          <text
+            class=
+
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  fill: #ffffff;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 600;
+                  pointer-events: none;
+                }
+            dominant-baseline="middle"
+            text-anchor="middle"
+            transform="translate(14.554455445544555, 13.341584158415841)"
+          >
+            50
+          </text>
+        </g>
+      </svg>
+    </div>
+    <div
+      class=
+
+          {
+            margin-left: 20px;
+            margin-top: 8px;
+          }
+    >
+      <div
+        class=
+
+            {
+              align-items: center;
+              margin-bottom: 0;
+              margin-left: -8px;
+              margin-right: 0;
+              margin-top: -8px;
+              white-space: nowrap;
+              width: 100%;
+            }
+      >
+        <div>
+          <div
+            style="position: relative;"
+          >
+            <div
+              data-automation-id="visibleContent"
+              style="position: fixed; visibility: hidden;"
+            >
+              <div
+                aria-label="Legends"
+                aria-multiselectable="false"
+                class=
+                    ms-FocusZone
+                    &:focus {
+                      outline: none;
+                    }
+                data-focuszone-id="FocusZone3"
+                role="listbox"
+              >
+                <div
+                  class=
+                      ms-OverflowSet
+                      {
+                        display: flex;
+                        flex-wrap: wrap;
+                        justify-content: unset;
+                        position: relative;
+                      }
+                  role="group"
+                >
+                  <div
+                    class=
+                        ms-OverflowSet-item
+                        {
+                          display: inherit;
+                          flex-shrink: 0;
+                        }
+                    role="none"
+                  >
+                    <button
+                      aria-label="Execllent (0-200)"
+                      aria-posinset="1"
+                      aria-selected="false"
+                      aria-setsize="1"
+                      class=
+
+                          {
+                            align-items: center;
+                            background: none;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            outline: transparent;
+                            padding-bottom: 8px;
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            padding-top: 8px;
+                            position: relative;
+                            text-transform: capitalize;
+                          }
+                          &::-moz-focus-inner {
+                            border: 0;
+                          }
+                          .ms-Fabric--isFocusVisible &:focus:after {
+                            border: 1px solid transparent;
+                            bottom: 1px;
+                            content: "";
+                            left: 1px;
+                            outline: 1px solid #605e5c;
+                            position: absolute;
+                            right: 1px;
+                            top: 1px;
+                            z-index: 1;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                            outline-color: #605e5c;
+                          }
+                      data-is-focusable="true"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class=
+
+                            {
+                              background-color: rgb(144, 180, 215);
+                              border-color: rgb(144, 180, 215);
+                              border: 1px solid;
+                              content: ;
+                              height: 12px;
+                              margin-right: 8px;
+                              width: 12px;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                              content: linear-gradient(to right, rgb(144, 180, 215), rgb(144, 180, 215));
+                              opacity: ;
+                            }
+                      />
+                      <div
+                        class=
+
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              color: #323130;
+                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                              font-size: 12px;
+                              font-weight: 400;
+                              line-height: 16px;
+                              opacity: ;
+                            }
+                      >
+                        Execllent (0-200)
+                      </div>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <span
+      class="ms-layer"
+    />
+  </div>
+</div>
+`;
diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
index d9dbd7ac34425..c9208fb923533 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
+++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx
@@ -30,7 +30,6 @@ export interface IHorizontalBarChartState {
   yCalloutValue?: string;
   barCalloutProps?: IChartDataPoint;
   callOutAccessibilityData?: IAccessibilityProps;
-  emptyChart?: boolean;
 }
 
 export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartProps, IHorizontalBarChartState> {
@@ -41,6 +40,7 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
   private _refArray: IRefArrayData[];
   private _calloutAnchorPoint: IChartDataPoint | null;
   private _isRTL: boolean = getRTL();
+  private _emptyChartId: string;
 
   constructor(props: IHorizontalBarChartProps) {
     super(props);
@@ -54,19 +54,12 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
       color: '',
       xCalloutValue: '',
       yCalloutValue: '',
-      emptyChart: false,
     };
     this._refArray = [];
     this._uniqLineText = '_HorizontalLine_' + Math.random().toString(36).substring(7);
     this._hoverOff = this._hoverOff.bind(this);
     this._calloutId = getId('callout');
-  }
-
-  public componentDidMount(): void {
-    const isChartEmpty: boolean = !(this.props.data && this.props.data.length > 0);
-    if (this.state.emptyChart !== isChartEmpty) {
-      this.setState({ emptyChart: isChartEmpty });
-    }
+    this._emptyChartId = getId('_HBC_empty');
   }
 
   public render(): JSX.Element {
@@ -74,7 +67,7 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
     this._adjustProps();
     const { palette } = theme!;
     let datapoint: number | undefined = 0;
-    return !this.state.emptyChart ? (
+    return !this._isChartEmpty() ? (
       <div className={this._classNames.root} onMouseLeave={this._handleChartMouseLeave}>
         {data!.map((points: IChartProps, index: number) => {
           if (points.chartData && points.chartData![0] && points.chartData![0].horizontalBarChartdata!.x) {
@@ -171,7 +164,12 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
         </Callout>
       </div>
     ) : (
-      <div id={getId('_HBC_')} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />
+      <div
+        id={this._emptyChartId}
+        role={'alert'}
+        style={{ opacity: '0' }}
+        aria-label={'Graph has no data to display'}
+      />
     );
   }
 
@@ -393,4 +391,8 @@ export class HorizontalBarChartBase extends React.Component<IHorizontalBarChartP
       (point.horizontalBarChartdata ? `${point.horizontalBarChartdata.x}/${point.horizontalBarChartdata.y}` : 0);
     return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`;
   };
+
+  private _isChartEmpty(): boolean {
+    return !(this.props.data && this.props.data.length > 0);
+  }
 }
diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.test.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.test.tsx
index 804d52e7100a3..f8a8a6bd829fb 100644
--- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.test.tsx
+++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.test.tsx
@@ -28,7 +28,7 @@ function sharedAfterEach() {
   }
 }
 
-const chartPoints: IChartProps[] = [
+export const chartPoints: IChartProps[] = [
   {
     chartTitle: 'one',
     chartData: [
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 53719454a4670..495795292a967 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
@@ -27,7 +27,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone1"
+        data-focuszone-id="FocusZone2"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -71,7 +71,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
             </span>
             <div
               hidden={true}
-              id="tooltip2"
+              id="tooltip3"
               style={
                 Object {
                   "border": 0,
@@ -112,7 +112,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
             {
               padding-right: 0px;
             }
-        data-focuszone-id="FocusZone3"
+        data-focuszone-id="FocusZone4"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -194,7 +194,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -238,7 +238,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
             </span>
             <div
               hidden={true}
-              id="tooltip5"
+              id="tooltip6"
               style={
                 Object {
                   "border": 0,
@@ -279,7 +279,7 @@ exports[`HorizontalBarChart - mouse events Should render callout correctly on mo
             {
               padding-right: 0px;
             }
-        data-focuszone-id="FocusZone6"
+        data-focuszone-id="FocusZone7"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -537,7 +537,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone1"
+        data-focuszone-id="FocusZone2"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -581,7 +581,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
             </span>
             <div
               hidden={true}
-              id="tooltip2"
+              id="tooltip3"
               style={
                 Object {
                   "border": 0,
@@ -622,7 +622,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
             {
               padding-right: 0px;
             }
-        data-focuszone-id="FocusZone3"
+        data-focuszone-id="FocusZone4"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -704,7 +704,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -748,7 +748,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
             </span>
             <div
               hidden={true}
-              id="tooltip5"
+              id="tooltip6"
               style={
                 Object {
                   "border": 0,
@@ -789,7 +789,7 @@ exports[`HorizontalBarChart - mouse events Should render customized callout on m
             {
               padding-right: 0px;
             }
-        data-focuszone-id="FocusZone6"
+        data-focuszone-id="FocusZone7"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -967,7 +967,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone8"
+        data-focuszone-id="FocusZone10"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1011,7 +1011,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
             </span>
             <div
               hidden={true}
-              id="tooltip9"
+              id="tooltip11"
               style={
                 Object {
                   "border": 0,
@@ -1039,7 +1039,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
             {
               padding-right: 0px;
             }
-        data-focuszone-id="FocusZone10"
+        data-focuszone-id="FocusZone12"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1099,7 +1099,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone11"
+        data-focuszone-id="FocusZone13"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1143,7 +1143,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
             </span>
             <div
               hidden={true}
-              id="tooltip12"
+              id="tooltip14"
               style={
                 Object {
                   "border": 0,
@@ -1171,7 +1171,7 @@ exports[`HorizontalBarChart snapShot testing Should not render bar labels in abs
             {
               padding-right: 0px;
             }
-        data-focuszone-id="FocusZone13"
+        data-focuszone-id="FocusZone15"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1248,7 +1248,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone1"
+        data-focuszone-id="FocusZone2"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1292,7 +1292,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
             </span>
             <div
               hidden={true}
-              id="tooltip2"
+              id="tooltip3"
               style={
                 Object {
                   "border": 0,
@@ -1320,7 +1320,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
             {
               padding-right: 40px;
             }
-        data-focuszone-id="FocusZone3"
+        data-focuszone-id="FocusZone4"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1398,7 +1398,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1442,7 +1442,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
             </span>
             <div
               hidden={true}
-              id="tooltip5"
+              id="tooltip6"
               style={
                 Object {
                   "border": 0,
@@ -1470,7 +1470,7 @@ exports[`HorizontalBarChart snapShot testing Should render absolute-scale varian
             {
               padding-right: 40px;
             }
-        data-focuszone-id="FocusZone6"
+        data-focuszone-id="FocusZone7"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/LineChart/LineChart.base.tsx b/packages/react-charting/src/components/LineChart/LineChart.base.tsx
index bedf80dbf3d75..d397eb83b171f 100644
--- a/packages/react-charting/src/components/LineChart/LineChart.base.tsx
+++ b/packages/react-charting/src/components/LineChart/LineChart.base.tsx
@@ -138,8 +138,6 @@ export interface ILineChartState extends IBasestate {
   nearestCircleToHighlight: ILineChartDataPoint | null;
 
   activeLine: number | null;
-
-  emptyChart?: boolean;
 }
 
 export class LineChartBase extends React.Component<ILineChartProps, ILineChartState> {
@@ -171,6 +169,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
   private _staticHighlightCircle: string;
   private _createLegendsMemoized: (data: LineChartDataWithIndex[]) => JSX.Element;
   private _firstRenderOptimization: boolean;
+  private _emptyChartId: string;
 
   constructor(props: ILineChartProps) {
     super(props);
@@ -187,7 +186,6 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       activePoint: '',
       nearestCircleToHighlight: null,
       activeLine: null,
-      emptyChart: false,
     };
     this._refArray = [];
     this._points = this._injectIndexPropertyInLineChartData(this.props.data.lineChartData);
@@ -203,6 +201,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
     this._staticHighlightCircle = getId('staticHighlightCircle');
     this._createLegendsMemoized = memoizeFunction((data: LineChartDataWithIndex[]) => this._createLegends(data));
     this._firstRenderOptimization = true;
+    this._emptyChartId = getId('_LineChart_empty');
 
     props.eventAnnotationProps &&
       props.eventAnnotationProps.labelHeight &&
@@ -223,18 +222,6 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
     }
   }
 
-  public componentDidMount(): void {
-    const isChartEmpty: boolean = !(
-      this.props.data &&
-      this.props.data.lineChartData &&
-      this.props.data.lineChartData.length > 0 &&
-      this.props.data.lineChartData.filter((item: ILineChartPoints) => item.data.length).length > 0
-    );
-    if (this.state.emptyChart !== isChartEmpty) {
-      this.setState({ emptyChart: isChartEmpty });
-    }
-  }
-
   public render(): JSX.Element {
     const { tickValues, tickFormat, eventAnnotationProps, legendProps, data } = this.props;
     this._points = this._injectIndexPropertyInLineChartData(data.lineChartData);
@@ -272,7 +259,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       tickFormat: tickFormat,
     };
 
-    return !this.state.emptyChart ? (
+    return !this._isChartEmpty() ? (
       <CartesianChart
         {...this.props}
         chartTitle={data.chartTitle}
@@ -336,7 +323,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       />
     ) : (
       <div
-        id={getId('_LineChart_')}
+        id={this._emptyChartId}
         role={'alert'}
         style={{ opacity: '0' }}
         aria-label={'Graph has no data to display'}
@@ -1389,4 +1376,13 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
     const yValue = point.yAxisCalloutData || point.y;
     return point.callOutAccessibilityData?.ariaLabel || `${xValue}. ${legend}, ${yValue}.`;
   };
+
+  private _isChartEmpty(): boolean {
+    return !(
+      this.props.data &&
+      this.props.data.lineChartData &&
+      this.props.data.lineChartData.length > 0 &&
+      this.props.data.lineChartData.filter((item: ILineChartPoints) => item.data.length).length > 0
+    );
+  }
 }
diff --git a/packages/react-charting/src/components/LineChart/LineChart.test.tsx b/packages/react-charting/src/components/LineChart/LineChart.test.tsx
index 74db68b8bd3e1..4221fee9fd2d2 100644
--- a/packages/react-charting/src/components/LineChart/LineChart.test.tsx
+++ b/packages/react-charting/src/components/LineChart/LineChart.test.tsx
@@ -46,12 +46,12 @@ const points: ILineChartPoints[] = [
     color: 'red',
   },
 ];
-const chartPoints = {
+export const chartPoints = {
   chartTitle: 'LineChart',
   lineChartData: points,
 };
 
-const emptyChartPoints = {
+export const emptyChartPoints = {
   chartTitle: 'EmptyLineChart',
   lineChartData: [],
 };
diff --git a/packages/react-charting/src/components/LineChart/LineChartRTL.test.tsx b/packages/react-charting/src/components/LineChart/LineChartRTL.test.tsx
new file mode 100644
index 0000000000000..d1871de807a4c
--- /dev/null
+++ b/packages/react-charting/src/components/LineChart/LineChartRTL.test.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { queryAllByAttribute, render, waitFor } from '@testing-library/react';
+import { chartPoints, emptyChartPoints } from './LineChart.test';
+import { LineChart } from './index';
+
+describe('Line chart rendering', () => {
+  test('Should re-render the Line chart with data', async () => {
+    // Arrange
+    const { container, rerender } = render(<LineChart data={emptyChartPoints} />);
+    const getById = queryAllByAttribute.bind(null, 'id');
+    // Assert
+    expect(container).toMatchSnapshot();
+    expect(getById(container, /_LineChart_empty/i)).toHaveLength(1);
+    // Act
+    rerender(<LineChart data={chartPoints} />);
+    await waitFor(() => {
+      // Assert
+      expect(container).toMatchSnapshot();
+      expect(getById(container, /_LineChart_empty/i)).toHaveLength(0);
+    });
+  });
+});
diff --git a/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap b/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
index 37500215689d9..5bfa9e1a48c8d 100644
--- a/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
+++ b/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
         overflow: hidden;
         width: 100%;
       }
-  id="chart_8"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -29,7 +29,7 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -70,7 +70,7 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
             & path {
               display: none;
             }
-        id="xAxisGElementchart_8"
+        id="xAxisGElementchart_9"
         transform="translate(0, 275)"
       />
       <g
@@ -98,7 +98,7 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_8"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -214,7 +214,7 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone10"
+              data-focuszone-id="FocusZone11"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -540,7 +540,7 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
         overflow: hidden;
         width: 100%;
       }
-  id="chart_8"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -553,7 +553,7 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -594,7 +594,7 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
             & path {
               display: none;
             }
-        id="xAxisGElementchart_8"
+        id="xAxisGElementchart_9"
         transform="translate(0, 275)"
       />
       <g
@@ -622,7 +622,7 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_8"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -738,7 +738,7 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone10"
+              data-focuszone-id="FocusZone11"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -962,7 +962,7 @@ exports[`LineChart - mouse events Should render customized callout per stack on
         overflow: hidden;
         width: 100%;
       }
-  id="chart_8"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -975,7 +975,7 @@ exports[`LineChart - mouse events Should render customized callout per stack on
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1016,7 +1016,7 @@ exports[`LineChart - mouse events Should render customized callout per stack on
             & path {
               display: none;
             }
-        id="xAxisGElementchart_8"
+        id="xAxisGElementchart_9"
         transform="translate(0, 275)"
       />
       <g
@@ -1044,7 +1044,7 @@ exports[`LineChart - mouse events Should render customized callout per stack on
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_8"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -1160,7 +1160,7 @@ exports[`LineChart - mouse events Should render customized callout per stack on
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone10"
+              data-focuszone-id="FocusZone11"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1384,7 +1384,7 @@ exports[`LineChart snapShot testing Should render with default colors when line
         overflow: hidden;
         width: 100%;
       }
-  id="chart_8"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1397,7 +1397,7 @@ exports[`LineChart snapShot testing Should render with default colors when line
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1438,7 +1438,7 @@ exports[`LineChart snapShot testing Should render with default colors when line
             & path {
               display: none;
             }
-        id="xAxisGElementchart_8"
+        id="xAxisGElementchart_9"
         transform="translate(0, 275)"
       />
       <g
@@ -1466,7 +1466,7 @@ exports[`LineChart snapShot testing Should render with default colors when line
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_8"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -1588,7 +1588,7 @@ exports[`LineChart snapShot testing Should render with default colors when line
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone10"
+              data-focuszone-id="FocusZone11"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1725,7 +1725,7 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_8"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1738,7 +1738,7 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1779,7 +1779,7 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_8"
+        id="xAxisGElementchart_9"
         transform="translate(0, 275)"
       />
       <g
@@ -1807,7 +1807,7 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_8"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -1929,7 +1929,7 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone10"
+              data-focuszone-id="FocusZone11"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2066,7 +2066,7 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
         overflow: hidden;
         width: 100%;
       }
-  id="chart_8"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2079,7 +2079,7 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2120,7 +2120,7 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
             & path {
               display: none;
             }
-        id="xAxisGElementchart_8"
+        id="xAxisGElementchart_9"
         transform="translate(0, 275)"
       />
       <g
@@ -2148,7 +2148,7 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_8"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -2253,7 +2253,7 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone10"
+        data-focuszone-id="FocusZone11"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2387,7 +2387,7 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_8"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2400,7 +2400,7 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2441,7 +2441,7 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_8"
+        id="xAxisGElementchart_9"
         transform="translate(0, 315)"
       />
       <g
@@ -2469,7 +2469,7 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_8"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -2567,7 +2567,7 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_8"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2580,7 +2580,7 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2621,7 +2621,7 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_8"
+        id="xAxisGElementchart_9"
         transform="translate(0, 275)"
       />
       <g
@@ -2649,7 +2649,7 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_8"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -2771,7 +2771,7 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone10"
+              data-focuszone-id="FocusZone11"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2908,7 +2908,7 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
         overflow: hidden;
         width: 100%;
       }
-  id="chart_8"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2921,7 +2921,7 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2962,7 +2962,7 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
             & path {
               display: none;
             }
-        id="xAxisGElementchart_8"
+        id="xAxisGElementchart_9"
         transform="translate(0, 275)"
       />
       <g
@@ -2990,7 +2990,7 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_8"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -3112,7 +3112,7 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone10"
+              data-focuszone-id="FocusZone11"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3249,7 +3249,7 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_8"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3262,7 +3262,7 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3303,7 +3303,7 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_8"
+        id="xAxisGElementchart_9"
         transform="translate(0, 275)"
       />
       <g
@@ -3331,7 +3331,7 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_8"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -3453,7 +3453,7 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone10"
+              data-focuszone-id="FocusZone11"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3590,7 +3590,7 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_8"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3603,7 +3603,7 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3644,7 +3644,7 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_8"
+        id="xAxisGElementchart_9"
         transform="translate(0, 275)"
       />
       <g
@@ -3672,7 +3672,7 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_8"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -3794,7 +3794,7 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone10"
+              data-focuszone-id="FocusZone11"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap b/packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap
new file mode 100644
index 0000000000000..1e8b8514ba0ac
--- /dev/null
+++ b/packages/react-charting/src/components/LineChart/__snapshots__/LineChartRTL.test.tsx.snap
@@ -0,0 +1,4232 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Line chart rendering Should re-render the Line chart with data 1`] = `
+<div>
+  <div
+    aria-label="Graph has no data to display"
+    id="_LineChart_empty42"
+    role="alert"
+    style="opacity: 0;"
+  />
+</div>
+`;
+
+exports[`Line chart rendering Should re-render the Line chart with data 2`] = `
+<div>
+  <div
+    class=
+
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          display: flex;
+          flex-direction: column;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: 100%;
+          overflow: hidden;
+          width: 100%;
+        }
+    id="chart_43"
+    role="presentation"
+  >
+    <div
+      class=
+          ms-FocusZone
+          &:focus {
+            outline: none;
+          }
+          {
+            overflow: auto;
+          }
+      data-focuszone-id="FocusZone44"
+    >
+      <svg
+        aria-label="LineChart"
+        focusable="false"
+        height="0"
+        style="display: block;"
+        width="0"
+      >
+        <g
+          class=
+
+              & text {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                fill: #323130;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 10px;
+                font-weight: 600;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                fill: rgb(179, 179, 179);
+              }
+              & line {
+                opacity: 0.2;
+                stroke: #323130;
+                width: 1px;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+                opacity: 0.1;
+                stroke: rgb(179, 179, 179);
+              }
+              & path {
+                display: none;
+              }
+          id="xAxisGElementchart_43"
+          transform="translate(0, -35)"
+        />
+        <g
+          class=
+
+              & text {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                fill: #323130;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 10px;
+                font-weight: 600;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                fill: rgb(179, 179, 179);
+              }
+              & path {
+                display: none;
+              }
+              & line {
+                opacity: 0.2;
+                stroke: #323130;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+                opacity: 0.1;
+                stroke: rgb(179, 179, 179);
+              }
+          id="yAxisGElementchart_43"
+          transform="translate(40, 0)"
+        />
+        <g>
+          <line
+            id="verticalLine37"
+            stroke="#323130"
+            stroke-dasharray="5,5"
+            visibility="hidden"
+            x1="0"
+            x2="0"
+            y1="0"
+            y2="0"
+          />
+          <g>
+            <line
+              id="lineID35_0_1"
+              opacity="1"
+              stroke="red"
+              stroke-linecap="round"
+              stroke-width="4"
+              x1="40"
+              x2="-20"
+              y1="-0.625"
+              y2="20"
+            />
+            <path
+              aria-label="20. metaData1, 50."
+              d="M39.5 -0.625
+     A0.5 0.5 0 1 0 40.5 -0.625
+     M39.5 -0.625
+     A 0.5 0.5 0 1 1 40.5 -0.625
+     "
+              data-is-focusable="true"
+              fill="red"
+              id="circle34_0_1"
+              opacity="1"
+              role="img"
+              stroke="red"
+              stroke-width="4"
+              tabindex="0"
+            />
+            <path
+              aria-label="40. metaData1, 80."
+              d="M-20.5 20
+     A0.5 0.5 0 1 0 -19.5 20
+     M-20.5 20
+     A 0.5 0.5 0 1 1 -19.5 20
+     "
+              data-is-focusable="true"
+              fill="red"
+              id="circle34_0_11L"
+              opacity="1"
+              role="img"
+              stroke="red"
+              stroke-width="4"
+              tabindex="-1"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+    <div
+      class=
+
+          {
+            margin-left: 20px;
+            margin-top: 8px;
+          }
+    >
+      <div
+        class=
+
+            {
+              align-items: center;
+              margin-bottom: 0;
+              margin-left: -8px;
+              margin-right: 0;
+              margin-top: -8px;
+              white-space: nowrap;
+              width: 100%;
+            }
+      >
+        <div>
+          <div
+            style="position: relative;"
+          >
+            <div
+              data-automation-id="visibleContent"
+              style="position: fixed; visibility: hidden;"
+            >
+              <div
+                aria-label="Legends"
+                aria-multiselectable="false"
+                class=
+                    ms-FocusZone
+                    &:focus {
+                      outline: none;
+                    }
+                data-focuszone-id="FocusZone45"
+                role="listbox"
+              >
+                <div
+                  class=
+                      ms-OverflowSet
+                      {
+                        display: flex;
+                        flex-wrap: wrap;
+                        justify-content: unset;
+                        position: relative;
+                      }
+                  role="group"
+                >
+                  <div
+                    class=
+                        ms-OverflowSet-item
+                        {
+                          display: inherit;
+                          flex-shrink: 0;
+                        }
+                    role="none"
+                  >
+                    <button
+                      aria-label="metaData1"
+                      aria-posinset="1"
+                      aria-selected="false"
+                      aria-setsize="1"
+                      class=
+
+                          {
+                            align-items: center;
+                            background: none;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            outline: transparent;
+                            padding-bottom: 8px;
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            padding-top: 8px;
+                            position: relative;
+                            text-transform: capitalize;
+                          }
+                          &::-moz-focus-inner {
+                            border: 0;
+                          }
+                          .ms-Fabric--isFocusVisible &:focus:after {
+                            border: 1px solid transparent;
+                            bottom: 1px;
+                            content: "";
+                            left: 1px;
+                            outline: 1px solid #605e5c;
+                            position: absolute;
+                            right: 1px;
+                            top: 1px;
+                            z-index: 1;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                            outline-color: #605e5c;
+                          }
+                      data-is-focusable="true"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class=
+
+                            {
+                              background-color: red;
+                              border-color: red;
+                              border: 1px solid;
+                              content: ;
+                              height: 12px;
+                              margin-right: 8px;
+                              width: 12px;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                              content: linear-gradient(to right, red, red);
+                              opacity: ;
+                            }
+                      />
+                      <div
+                        class=
+
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              color: #323130;
+                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                              font-size: 12px;
+                              font-weight: 400;
+                              line-height: 16px;
+                              opacity: ;
+                            }
+                      >
+                        metaData1
+                      </div>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <span
+      class="ms-layer"
+    />
+  </div>
+</div>
+`;
+
+exports[`LineChart - mouse events Should render callout correctly on mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="LineChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={100}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <line
+          id="verticalLine3"
+          stroke="#323130"
+          strokeDasharray="5,5"
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+        <g>
+          <line
+            id="lineID1_0_1"
+            key="lineID1_0_1"
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            stroke="red"
+            strokeLinecap="round"
+            strokeWidth={4}
+            x1={40}
+            x2={80}
+            y1={115.625}
+            y2={20}
+          />
+          <path
+            aria-label="20. metaData1, 50."
+            d="M34.5 115.625
+     A5.5 5.5 0 1 0 45.5 115.625
+     M34.5 115.625
+     A 5.5 5.5 0 1 1 45.5 115.625
+     "
+            data-is-focusable={true}
+            fill="#ffffff"
+            id="circle0_0_1"
+            key="circle0_0_1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+          <path
+            aria-label="40. metaData1, 80."
+            d="M79.5 20
+     A0.5 0.5 0 1 0 80.5 20
+     M79.5 20
+     A 0.5 0.5 0 1 1 80.5 20
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone11"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+          {
+            animation-duration: 0.367s;
+            animation-fill-mode: both;
+            animation-name: keyframes from{opacity:0;}to{opacity:1;} keyframes from{transform:translate3d(0,-10px,0);pointer-events:none;}to{transform:translate3d(0,0,0);pointer-events:auto;};
+            animation-timing-function: cubic-bezier(.1,.9,.2,1);
+          }
+      data-is-focusable={true}
+      hidden={false}
+      id="toolTipcircle0_0_1"
+      style={
+        Object {
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div
+          className=
+
+              {
+                background-blend-mode: normal, luminosity;
+                background-color: #ffffff;
+                display: grid;
+                overflow: hidden;
+                padding-bottom: 10px;
+                padding-left: 16px;
+                padding-right: 16px;
+                padding-top: 11px;
+              }
+        >
+          <div
+            className=
+
+                {
+                  display: flex;
+                  flex-direction: row;
+                  justify-content: space-between;
+                }
+            style={Object {}}
+          >
+            <div
+              className=
+
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #605e5c;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 12px;
+                    font-weight: 400;
+                    line-height: 16px;
+                    opacity: 0.8;
+                  }
+              data-is-focusable={false}
+              role="text"
+            >
+              20
+            </div>
+          </div>
+          <div
+            style={Object {}}
+          >
+            <div
+              data-is-focusable={false}
+              key="callout-content-0"
+              role="text"
+              style={Object {}}
+            >
+              <div
+                style={Object {}}
+              >
+                <div
+                  className=
+
+                      {
+                        -moz-osx-font-smoothing: grayscale;
+                        -webkit-font-smoothing: antialiased;
+                        border-left: 4px solid red;
+                        color: #323130;
+                        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                        font-size: 16px;
+                        font-weight: 400;
+                        margin-top: 13px;
+                        padding-left: 8px;
+                      }
+                      @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                        forced-color-adjust: none;
+                      }
+                  id="0_50"
+                >
+                  <div>
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #605e5c;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                          }
+                          @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+                            color: rgb(255, 255, 255);
+                          }
+                    >
+                       
+                      metaData1
+                    </div>
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 16px;
+                            font-weight: bold;
+                            line-height: 22px;
+                          }
+                          @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+                            color: rgb(255, 255, 255);
+                          }
+                    >
+                      50
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`LineChart - mouse events Should render customized callout on mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="LineChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={100}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <line
+          id="verticalLine3"
+          stroke="#323130"
+          strokeDasharray="5,5"
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+        <g>
+          <line
+            id="lineID1_0_1"
+            key="lineID1_0_1"
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            stroke="red"
+            strokeLinecap="round"
+            strokeWidth={4}
+            x1={40}
+            x2={80}
+            y1={115.625}
+            y2={20}
+          />
+          <path
+            aria-label="20. metaData1, 50."
+            d="M34.5 115.625
+     A5.5 5.5 0 1 0 45.5 115.625
+     M34.5 115.625
+     A 5.5 5.5 0 1 1 45.5 115.625
+     "
+            data-is-focusable={true}
+            fill="#ffffff"
+            id="circle0_0_1"
+            key="circle0_0_1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+          <path
+            aria-label="40. metaData1, 80."
+            d="M79.5 20
+     A0.5 0.5 0 1 0 80.5 20
+     M79.5 20
+     A 0.5 0.5 0 1 1 80.5 20
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone11"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+          {
+            animation-duration: 0.367s;
+            animation-fill-mode: both;
+            animation-name: keyframes from{opacity:0;}to{opacity:1;} keyframes from{transform:translate3d(0,-10px,0);pointer-events:none;}to{transform:translate3d(0,0,0);pointer-events:auto;};
+            animation-timing-function: cubic-bezier(.1,.9,.2,1);
+          }
+      data-is-focusable={true}
+      hidden={false}
+      id="toolTipcircle0_0_1"
+      style={
+        Object {
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div>
+          <pre>
+            {
+  "x": 20,
+  "values": [
+    {
+      "legend": "metaData1",
+      "y": 50,
+      "color": "red",
+      "index": -1
+    }
+  ]
+}
+          </pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`LineChart - mouse events Should render customized callout per stack on mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="LineChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={100}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <line
+          id="verticalLine3"
+          stroke="#323130"
+          strokeDasharray="5,5"
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+        <g>
+          <line
+            id="lineID1_0_1"
+            key="lineID1_0_1"
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            stroke="red"
+            strokeLinecap="round"
+            strokeWidth={4}
+            x1={40}
+            x2={80}
+            y1={115.625}
+            y2={20}
+          />
+          <path
+            aria-label="20. metaData1, 50."
+            d="M34.5 115.625
+     A5.5 5.5 0 1 0 45.5 115.625
+     M34.5 115.625
+     A 5.5 5.5 0 1 1 45.5 115.625
+     "
+            data-is-focusable={true}
+            fill="#ffffff"
+            id="circle0_0_1"
+            key="circle0_0_1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+          <path
+            aria-label="40. metaData1, 80."
+            d="M79.5 20
+     A0.5 0.5 0 1 0 80.5 20
+     M79.5 20
+     A 0.5 0.5 0 1 1 80.5 20
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone11"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+          {
+            animation-duration: 0.367s;
+            animation-fill-mode: both;
+            animation-name: keyframes from{opacity:0;}to{opacity:1;} keyframes from{transform:translate3d(0,-10px,0);pointer-events:none;}to{transform:translate3d(0,0,0);pointer-events:auto;};
+            animation-timing-function: cubic-bezier(.1,.9,.2,1);
+          }
+      data-is-focusable={true}
+      hidden={false}
+      id="toolTipcircle0_0_1"
+      style={
+        Object {
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div>
+          <pre>
+            {
+  "x": 20,
+  "values": [
+    {
+      "legend": "metaData1",
+      "y": 50,
+      "color": "red",
+      "index": -1
+    }
+  ]
+}
+          </pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`LineChart snapShot testing Should render with default colors when line color is not provided 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="LineChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={100}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <line
+          id="verticalLine3"
+          stroke="#323130"
+          strokeDasharray="5,5"
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+        <g>
+          <line
+            id="lineID1_0_1"
+            key="lineID1_0_1"
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            stroke="#637cef"
+            strokeLinecap="round"
+            strokeWidth={4}
+            x1={40}
+            x2={80}
+            y1={115.625}
+            y2={20}
+          />
+          <path
+            aria-label="20. metaData1, 50."
+            d="M39.5 115.625
+     A0.5 0.5 0 1 0 40.5 115.625
+     M39.5 115.625
+     A 0.5 0.5 0 1 1 40.5 115.625
+     "
+            data-is-focusable={true}
+            fill="#637cef"
+            id="circle0_0_1"
+            key="circle0_0_1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="#637cef"
+            strokeWidth={4}
+          />
+          <path
+            aria-label="40. metaData1, 80."
+            d="M79.5 20
+     A0.5 0.5 0 1 0 80.5 20
+     M79.5 20
+     A 0.5 0.5 0 1 1 80.5 20
+     "
+            data-is-focusable={true}
+            fill="#637cef"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="#637cef"
+            strokeWidth={4}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone11"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #637cef;
+                            border-color: #637cef;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #637cef, #637cef);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="LineChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={100}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <line
+          id="verticalLine3"
+          stroke="#323130"
+          strokeDasharray="5,5"
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+        <g>
+          <line
+            id="lineID1_0_1"
+            key="lineID1_0_1"
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            stroke="red"
+            strokeLinecap="round"
+            strokeWidth={4}
+            x1={40}
+            x2={80}
+            y1={115.625}
+            y2={20}
+          />
+          <path
+            aria-label="20. metaData1, 50."
+            d="M39.5 115.625
+     A0.5 0.5 0 1 0 40.5 115.625
+     M39.5 115.625
+     A 0.5 0.5 0 1 1 40.5 115.625
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_1"
+            key="circle0_0_1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+          <path
+            aria-label="40. metaData1, 80."
+            d="M79.5 20
+     A0.5 0.5 0 1 0 80.5 20
+     M79.5 20
+     A 0.5 0.5 0 1 1 80.5 20
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone11"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="LineChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={100}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <line
+          id="verticalLine3"
+          stroke="#323130"
+          strokeDasharray="5,5"
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+        <g>
+          <line
+            id="lineID1_0_1"
+            key="lineID1_0_1"
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            stroke="red"
+            strokeLinecap="round"
+            strokeWidth={4}
+            x1={40}
+            x2={80}
+            y1={115.625}
+            y2={20}
+          />
+          <path
+            aria-label="20. metaData1, 50."
+            d="M39.5 115.625
+     A0.5 0.5 0 1 0 40.5 115.625
+     M39.5 115.625
+     A 0.5 0.5 0 1 1 40.5 115.625
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_1"
+            key="circle0_0_1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+          <path
+            aria-label="40. metaData1, 80."
+            d="M79.5 20
+     A0.5 0.5 0 1 0 80.5 20
+     M79.5 20
+     A 0.5 0.5 0 1 1 80.5 20
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div
+        aria-label="Legends"
+        aria-multiselectable={false}
+        className=
+            ms-FocusZone
+            &:focus {
+              outline: none;
+            }
+        data-focuszone-id="FocusZone11"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDownCapture={[Function]}
+        role="listbox"
+      >
+        <div
+          className=
+              ms-OverflowSet
+              {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: unset;
+                position: relative;
+              }
+          role="group"
+        >
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="0"
+            role="none"
+          >
+            <button
+              aria-label="metaData1"
+              aria-posinset={1}
+              aria-selected={false}
+              aria-setsize={1}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: red;
+                      border-color: red;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, red, red);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                metaData1
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="LineChart"
+      height={350}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={100}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, 315)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <line
+          id="verticalLine3"
+          stroke="#323130"
+          strokeDasharray="5,5"
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={350}
+        />
+        <g>
+          <line
+            id="lineID1_0_1"
+            key="lineID1_0_1"
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            stroke="red"
+            strokeLinecap="round"
+            strokeWidth={4}
+            x1={40}
+            x2={80}
+            y1={130.625}
+            y2={20}
+          />
+          <path
+            aria-label="20. metaData1, 50."
+            d="M39.5 130.625
+     A0.5 0.5 0 1 0 40.5 130.625
+     M39.5 130.625
+     A 0.5 0.5 0 1 1 40.5 130.625
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_1"
+            key="circle0_0_1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+          <path
+            aria-label="40. metaData1, 80."
+            d="M79.5 20
+     A0.5 0.5 0 1 0 80.5 20
+     M79.5 20
+     A 0.5 0.5 0 1 1 80.5 20
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="LineChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={100}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <line
+          id="verticalLine3"
+          stroke="#323130"
+          strokeDasharray="5,5"
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+        <g>
+          <line
+            id="lineID1_0_1"
+            key="lineID1_0_1"
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            stroke="red"
+            strokeLinecap="round"
+            strokeWidth={4}
+            x1={40}
+            x2={80}
+            y1={115.625}
+            y2={20}
+          />
+          <path
+            aria-label="20. metaData1, 50."
+            d="M39.5 115.625
+     A0.5 0.5 0 1 0 40.5 115.625
+     M39.5 115.625
+     A 0.5 0.5 0 1 1 40.5 115.625
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_1"
+            key="circle0_0_1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+          <path
+            aria-label="40. metaData1, 80."
+            d="M79.5 20
+     A0.5 0.5 0 1 0 80.5 20
+     M79.5 20
+     A 0.5 0.5 0 1 1 80.5 20
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone11"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="LineChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={100}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <line
+          id="verticalLine3"
+          stroke="#323130"
+          strokeDasharray="5,5"
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+        <g>
+          <line
+            id="lineID1_0_1"
+            key="lineID1_0_1"
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            stroke="red"
+            strokeLinecap="round"
+            strokeWidth={4}
+            x1={40}
+            x2={80}
+            y1={115.625}
+            y2={20}
+          />
+          <path
+            aria-label="20. metaData1, 50."
+            d="M39.5 115.625
+     A0.5 0.5 0 1 0 40.5 115.625
+     M39.5 115.625
+     A 0.5 0.5 0 1 1 40.5 115.625
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_1"
+            key="circle0_0_1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+          <path
+            aria-label="40. metaData1, 80."
+            d="M79.5 20
+     A0.5 0.5 0 1 0 80.5 20
+     M79.5 20
+     A 0.5 0.5 0 1 1 80.5 20
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone11"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="LineChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={140}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <line
+          id="verticalLine3"
+          stroke="#323130"
+          strokeDasharray="5,5"
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+        <g>
+          <line
+            id="lineID1_0_1"
+            key="lineID1_0_1"
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            stroke="red"
+            strokeLinecap="round"
+            strokeWidth={4}
+            x1={40}
+            x2={120}
+            y1={115.625}
+            y2={20}
+          />
+          <path
+            aria-label="20. metaData1, 50."
+            d="M39.5 115.625
+     A0.5 0.5 0 1 0 40.5 115.625
+     M39.5 115.625
+     A 0.5 0.5 0 1 1 40.5 115.625
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_1"
+            key="circle0_0_1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+          <path
+            aria-label="40. metaData1, 80."
+            d="M119.5 20
+     A0.5 0.5 0 1 0 120.5 20
+     M119.5 20
+     A 0.5 0.5 0 1 1 120.5 20
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone11"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      aria-label="LineChart"
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={100}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <line
+          id="verticalLine3"
+          stroke="#323130"
+          strokeDasharray="5,5"
+          visibility="hidden"
+          x1={0}
+          x2={0}
+          y1={0}
+          y2={310}
+        />
+        <g>
+          <line
+            id="lineID1_0_1"
+            key="lineID1_0_1"
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            stroke="red"
+            strokeLinecap="round"
+            strokeWidth={4}
+            x1={40}
+            x2={80}
+            y1={115.625}
+            y2={20}
+          />
+          <path
+            aria-label="20. metaData1, 50."
+            d="M39.5 115.625
+     A0.5 0.5 0 1 0 40.5 115.625
+     M39.5 115.625
+     A 0.5 0.5 0 1 1 40.5 115.625
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_1"
+            key="circle0_0_1"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+          <path
+            aria-label="40. metaData1, 80."
+            d="M79.5 20
+     A0.5 0.5 0 1 0 80.5 20
+     M79.5 20
+     A 0.5 0.5 0 1 1 80.5 20
+     "
+            data-is-focusable={true}
+            fill="red"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseMove={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity={1}
+            role="img"
+            stroke="red"
+            strokeWidth={4}
+          />
+        </g>
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone11"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  key="0"
+                  role="none"
+                >
+                  <button
+                    aria-label="metaData1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={1}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: red;
+                            border-color: red;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, red, red);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      metaData1
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
diff --git a/packages/react-charting/src/components/PieChart/PieChart.base.tsx b/packages/react-charting/src/components/PieChart/PieChart.base.tsx
index 9b500672680c1..da671491182bd 100644
--- a/packages/react-charting/src/components/PieChart/PieChart.base.tsx
+++ b/packages/react-charting/src/components/PieChart/PieChart.base.tsx
@@ -5,34 +5,19 @@ import { Pie } from './Pie/Pie';
 import { IProcessedStyleSet } from '@fluentui/react/lib/Styling';
 
 const getClassNames = classNamesFunction<IPieChartStyleProps, IPieChartStyles>();
-export interface IPieChartState {
-  emptyChart?: boolean;
-}
 
-export class PieChartBase extends React.Component<IPieChartProps, IPieChartState> {
+export class PieChartBase extends React.Component<IPieChartProps, {}> {
   public static defaultProps: Partial<IPieChartProps> = {
     data: [],
     width: 600,
     height: 350,
   };
   private _classNames: IProcessedStyleSet<IPieChartStyles>;
+  private _emptyChartId: string;
 
   public constructor(props: IPieChartProps) {
     super(props);
-    this.state = {
-      emptyChart: false,
-    };
-  }
-
-  public componentDidMount(): void {
-    const isChartEmpty = !(
-      this.props.data &&
-      this.props.data.length > 0 &&
-      this.props.data.filter(item => item.y > 0).length > 0
-    );
-    if (this.state.emptyChart !== isChartEmpty) {
-      this.setState({ emptyChart: isChartEmpty });
-    }
+    this._emptyChartId = getId('_PieChart_empty');
   }
 
   public render(): JSX.Element {
@@ -48,7 +33,7 @@ export class PieChartBase extends React.Component<IPieChartProps, IPieChartState
     const radius = Math.min(width!, height!) / 2;
     const outerRadius = radius - 10;
 
-    return !this.state.emptyChart ? (
+    return !this._isChartEmpty() ? (
       <div className={this._classNames.root}>
         {this.props.chartTitle && <p className={this._classNames.chartTitle}>{this.props.chartTitle}</p>}
         <Pie
@@ -64,11 +49,15 @@ export class PieChartBase extends React.Component<IPieChartProps, IPieChartState
       </div>
     ) : (
       <div
-        id={getId('_PieChart_')}
+        id={this._emptyChartId}
         role={'alert'}
         style={{ opacity: '0' }}
         aria-label={'Graph has no data to display'}
       />
     );
   }
+
+  private _isChartEmpty(): boolean {
+    return !(this.props.data && this.props.data.length > 0 && this.props.data.filter(item => item.y > 0).length > 0);
+  }
 }
diff --git a/packages/react-charting/src/components/PieChart/PieChart.test.tsx b/packages/react-charting/src/components/PieChart/PieChart.test.tsx
index efc592626d28f..71e6c02446ee5 100644
--- a/packages/react-charting/src/components/PieChart/PieChart.test.tsx
+++ b/packages/react-charting/src/components/PieChart/PieChart.test.tsx
@@ -28,12 +28,12 @@ function sharedAfterEach() {
   }
 }
 
-const chartPoints = [
+export const chartPoints = [
   { y: 50, x: 'A' },
   { y: 25, x: 'B' },
   { y: 25, x: 'C' },
 ];
-const colors = [DefaultPalette.red, DefaultPalette.blue, DefaultPalette.green];
+export const colors = [DefaultPalette.red, DefaultPalette.blue, DefaultPalette.green];
 
 describe('PieChart snapShot testing', () => {
   it('renders PieChart correctly', () => {
diff --git a/packages/react-charting/src/components/PieChart/PieChartRTL.test.tsx b/packages/react-charting/src/components/PieChart/PieChartRTL.test.tsx
new file mode 100644
index 0000000000000..3d5cd25ebe576
--- /dev/null
+++ b/packages/react-charting/src/components/PieChart/PieChartRTL.test.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { queryAllByAttribute, render, waitFor } from '@testing-library/react';
+import { PieChart } from './index';
+import { chartPoints, colors } from './PieChart.test';
+
+describe('Pie chart rendering', () => {
+  test('Should re-render the Pie chart with data', async () => {
+    // Arrange
+    const { container, rerender } = render(<PieChart data={[]} colors={colors} />);
+    const getById = queryAllByAttribute.bind(null, 'id');
+    // Assert
+    expect(container).toMatchSnapshot();
+    expect(getById(container, /_PieChart_empty/i)).toHaveLength(1);
+    // Act
+    rerender(<PieChart data={chartPoints} colors={colors} />);
+    await waitFor(() => {
+      // Assert
+      expect(container).toMatchSnapshot();
+      expect(getById(container, /_PieChart_empty/i)).toHaveLength(0);
+    });
+  });
+});
diff --git a/packages/react-charting/src/components/PieChart/__snapshots__/PieChartRTL.test.tsx.snap b/packages/react-charting/src/components/PieChart/__snapshots__/PieChartRTL.test.tsx.snap
new file mode 100644
index 0000000000000..e730fc97eced3
--- /dev/null
+++ b/packages/react-charting/src/components/PieChart/__snapshots__/PieChartRTL.test.tsx.snap
@@ -0,0 +1,288 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pie chart rendering Should re-render the Pie chart with data 1`] = `
+<div>
+  <div
+    aria-label="Graph has no data to display"
+    id="_PieChart_empty5"
+    role="alert"
+    style="opacity: 0;"
+  />
+</div>
+`;
+
+exports[`Pie chart rendering Should re-render the Pie chart with data 2`] = `
+<div>
+  <div
+    class=
+        ms-PieChart
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          width: 670px;
+        }
+    style=""
+  >
+    <svg
+      height="350"
+      width="600"
+    >
+      <g
+        transform="translate(300, 175)"
+      >
+        <g
+          class="arc"
+        >
+          <path
+            class=
+
+                {
+                  fill: #e81123;
+                  stroke-width: 2px;
+                  stroke: #ffffff;
+                }
+            d="M0,-165A165,165,0,1,1,0,165L0,0Z"
+          />
+          <text
+            text-anchor="middle"
+            transform="translate(82.5, 1.8318679906315083e-14)"
+          >
+            A
+            -
+            50
+          </text>
+        </g>
+        <g
+          class="arc"
+        >
+          <path
+            class=
+
+                {
+                  fill: #0078d4;
+                  stroke-width: 2px;
+                  stroke: #ffffff;
+                }
+            d="M0,165A165,165,0,0,1,-165,0L0,0Z"
+          />
+          <text
+            text-anchor="middle"
+            transform="translate(-58.33630944789022, 58.33630944789013)"
+          >
+            B
+            -
+            25
+          </text>
+        </g>
+        <g
+          class="arc"
+        >
+          <path
+            class=
+
+                {
+                  fill: #107c10;
+                  stroke-width: 2px;
+                  stroke: #ffffff;
+                }
+            d="M-165,0A165,165,0,0,1,0,-165L0,0Z"
+          />
+          <text
+            text-anchor="middle"
+            transform="translate(-58.33630944789013, -58.33630944789022)"
+          >
+            C
+            -
+            25
+          </text>
+        </g>
+      </g>
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`PieChart snapShot testing renders PieChart correctly 1`] = `
+<div
+  className=
+      ms-PieChart
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        width: 670px;
+      }
+>
+  <svg
+    height={350}
+    width={600}
+  >
+    <g
+      transform="translate(300, 175)"
+    >
+      <g
+        className="arc"
+      >
+        <path
+          className=
+
+              {
+                fill: #e81123;
+                stroke-width: 2px;
+                stroke: #ffffff;
+              }
+          d="M0,-165A165,165,0,1,1,0,165L0,0Z"
+        />
+        <text
+          textAnchor="middle"
+          transform="translate(82.5, 1.8318679906315083e-14)"
+        >
+          A
+          -
+          50
+        </text>
+      </g>
+      <g
+        className="arc"
+      >
+        <path
+          className=
+
+              {
+                fill: #0078d4;
+                stroke-width: 2px;
+                stroke: #ffffff;
+              }
+          d="M0,165A165,165,0,0,1,-165,0L0,0Z"
+        />
+        <text
+          textAnchor="middle"
+          transform="translate(-58.33630944789022, 58.33630944789013)"
+        >
+          B
+          -
+          25
+        </text>
+      </g>
+      <g
+        className="arc"
+      >
+        <path
+          className=
+
+              {
+                fill: #107c10;
+                stroke-width: 2px;
+                stroke: #ffffff;
+              }
+          d="M-165,0A165,165,0,0,1,0,-165L0,0Z"
+        />
+        <text
+          textAnchor="middle"
+          transform="translate(-58.33630944789013, -58.33630944789022)"
+        >
+          C
+          -
+          25
+        </text>
+      </g>
+    </g>
+  </svg>
+</div>
+`;
+
+exports[`PieChart snapShot testing renders with colors, width and height data correctly 1`] = `
+<div
+  className=
+      ms-PieChart
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        width: 670px;
+      }
+>
+  <svg
+    height={300}
+    width={600}
+  >
+    <g
+      transform="translate(300, 150)"
+    >
+      <g
+        className="arc"
+      >
+        <path
+          className=
+
+              {
+                fill: #e81123;
+                stroke-width: 2px;
+                stroke: #ffffff;
+              }
+          d="M0,-140A140,140,0,1,1,0,140L0,0Z"
+        />
+        <text
+          textAnchor="middle"
+          transform="translate(70, 1.554312234475219e-14)"
+        >
+          A
+          -
+          50
+        </text>
+      </g>
+      <g
+        className="arc"
+      >
+        <path
+          className=
+
+              {
+                fill: #0078d4;
+                stroke-width: 2px;
+                stroke: #ffffff;
+              }
+          d="M0,140A140,140,0,0,1,-140,0L0,0Z"
+        />
+        <text
+          textAnchor="middle"
+          transform="translate(-49.49747468305837, 49.49747468305829)"
+        >
+          B
+          -
+          25
+        </text>
+      </g>
+      <g
+        className="arc"
+      >
+        <path
+          className=
+
+              {
+                fill: #107c10;
+                stroke-width: 2px;
+                stroke: #ffffff;
+              }
+          d="M-140,0A140,140,0,0,1,0,-140L0,0Z"
+        />
+        <text
+          textAnchor="middle"
+          transform="translate(-49.49747468305829, -49.49747468305837)"
+        >
+          C
+          -
+          25
+        </text>
+      </g>
+    </g>
+  </svg>
+</div>
+`;
diff --git a/packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx b/packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx
index f75f01b507b95..9e61cf5354f5f 100644
--- a/packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx
+++ b/packages/react-charting/src/components/SankeyChart/SankeyChart.base.tsx
@@ -29,7 +29,6 @@ export interface ISankeyChartState extends IBasestate, IChartHoverCardProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   selectedLink?: SLink;
   shouldOverflow: boolean;
-  emptyChart?: boolean;
 }
 
 const NON_SELECTED_NODE_AND_STREAM_COLOR: string = '#757575';
@@ -66,6 +65,7 @@ export class SankeyChartBase extends React.Component<ISankeyChartProps, ISankeyC
   private _margins: IMargins;
   private _isRtl: boolean = getRTL();
   private _normalizeData: (data: ISankeyChartData) => void;
+  private _emptyChartId: string;
 
   constructor(props: ISankeyChartProps) {
     super(props);
@@ -77,18 +77,13 @@ export class SankeyChartBase extends React.Component<ISankeyChartProps, ISankeyC
       selectedNodes: new Set<number>(),
       shouldOverflow: false,
       isCalloutVisible: false,
-      emptyChart: !(
-        this.props.data &&
-        this.props.data.SankeyChartData &&
-        this.props.data.SankeyChartData.nodes.length > 0 &&
-        this.props.data.SankeyChartData.links.length > 0
-      ),
     };
     this._calloutId = getId('callout');
     this._linkId = getId('link');
     this._margins = { top: 36, right: 48, bottom: 32, left: 48 };
     this._preRenderLayout();
     this._normalizeData = memoizeFunction((data: ISankeyChartData) => this._normalizeSankeyData(data));
+    this._emptyChartId = getId('_SankeyChart_empty');
   }
   public componentDidMount(): void {
     this._fitParentContainer();
@@ -103,7 +98,7 @@ export class SankeyChartBase extends React.Component<ISankeyChartProps, ISankeyC
     cancelAnimationFrame(this._reqID);
   }
   public render(): React.ReactNode {
-    if (!this.state.emptyChart) {
+    if (!this._isChartEmpty()) {
       const { theme, className, styles, pathColor } = this.props;
       this._classNames = getClassNames(styles!, {
         theme: theme!,
@@ -173,7 +168,7 @@ export class SankeyChartBase extends React.Component<ISankeyChartProps, ISankeyC
     }
     return (
       <div
-        id={getId('_SankeyChart_')}
+        id={this._emptyChartId}
         role={'alert'}
         style={{ opacity: '0' }}
         aria-label={'Graph has no data to display'}
@@ -786,8 +781,8 @@ export class SankeyChartBase extends React.Component<ISankeyChartProps, ISankeyC
     const { containerWidth, containerHeight } = this.state;
     this._reqID = requestAnimationFrame(() => {
       const container = this.props.parentRef ? this.props.parentRef : this.chartContainer;
-      const currentContainerWidth = container.getBoundingClientRect().width;
-      const currentContainerHeight = container.getBoundingClientRect().height;
+      const currentContainerWidth = container && container.getBoundingClientRect().width;
+      const currentContainerHeight = container && container.getBoundingClientRect().height;
       const shouldResize = containerWidth !== currentContainerWidth || containerHeight !== currentContainerHeight;
       if (shouldResize) {
         this.setState({
@@ -858,4 +853,13 @@ export class SankeyChartBase extends React.Component<ISankeyChartProps, ISankeyC
   private _hideTooltip(div: any) {
     div.style('opacity', 0);
   }
+
+  private _isChartEmpty() {
+    return !(
+      this.props.data &&
+      this.props.data.SankeyChartData &&
+      this.props.data.SankeyChartData.nodes.length > 0 &&
+      this.props.data.SankeyChartData.links.length > 0
+    );
+  }
 }
diff --git a/packages/react-charting/src/components/SankeyChart/SankeyChart.test.tsx b/packages/react-charting/src/components/SankeyChart/SankeyChart.test.tsx
index 13226931a3587..f843b5b1ec163 100644
--- a/packages/react-charting/src/components/SankeyChart/SankeyChart.test.tsx
+++ b/packages/react-charting/src/components/SankeyChart/SankeyChart.test.tsx
@@ -29,7 +29,7 @@ function sharedAfterEach() {
   }
 }
 
-const data: IChartProps = {
+export const data: IChartProps = {
   chartTitle: 'Sankey Chart',
   SankeyChartData: {
     nodes: [
diff --git a/packages/react-charting/src/components/SankeyChart/SankeyChartRTL.test.tsx b/packages/react-charting/src/components/SankeyChart/SankeyChartRTL.test.tsx
new file mode 100644
index 0000000000000..f874d1411ad27
--- /dev/null
+++ b/packages/react-charting/src/components/SankeyChart/SankeyChartRTL.test.tsx
@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as React from 'react';
+import { queryAllByAttribute, render, waitFor } from '@testing-library/react';
+import { data } from './SankeyChart.test';
+import { IChartProps, SankeyChart } from './index';
+import { resetIds } from '../../Utilities';
+import { SankeyChartBase } from './SankeyChart.base';
+
+const emptyChartPoints: IChartProps = {
+  chartData: [],
+};
+
+function sharedBeforeEach() {
+  resetIds();
+}
+
+describe('Sankey chart rendering', () => {
+  beforeEach(sharedBeforeEach);
+  test('Should re-render the Sankey chart with data', async () => {
+    jest.spyOn(SankeyChartBase.prototype as any, '_truncateText').mockImplementation(() => 'test');
+    jest.spyOn(SankeyChartBase.prototype as any, '_createNodes').mockImplementation(() => []);
+    // Arrange
+    const { container, rerender } = render(<SankeyChart data={emptyChartPoints} />);
+    const getById = queryAllByAttribute.bind(null, 'id');
+    // Assert
+    expect(container).toMatchSnapshot();
+    expect(getById(container, /_SankeyChart_empty/i)).toHaveLength(1);
+    // Act
+    rerender(<SankeyChart data={data} />);
+    await waitFor(() => {
+      // Assert
+      expect(container).toMatchSnapshot();
+      expect(getById(container, /_SankeyChart_empty/i)).toHaveLength(0);
+    });
+  });
+});
diff --git a/packages/react-charting/src/components/SankeyChart/__snapshots__/SankeyChart.test.tsx.snap b/packages/react-charting/src/components/SankeyChart/__snapshots__/SankeyChart.test.tsx.snap
index cd53268e646ac..04f43c50417bb 100644
--- a/packages/react-charting/src/components/SankeyChart/__snapshots__/SankeyChart.test.tsx.snap
+++ b/packages/react-charting/src/components/SankeyChart/__snapshots__/SankeyChart.test.tsx.snap
@@ -25,14 +25,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone51"
+    data-focuszone-id="FocusZone52"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       height={436}
-      id="sankeyChart50"
+      id="sankeyChart51"
       width={864}
     >
       <g
@@ -72,7 +72,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link38"
+            id="link39"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -107,7 +107,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M172,173.315C282.75,173.315,282.75,167.002,393.5,167.002L393.5,247.823C282.75,247.823,282.75,254.137,172,254.137Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link39"
+            id="link40"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -142,7 +142,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link40"
+            id="link41"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -177,7 +177,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link41"
+            id="link42"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -212,7 +212,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link42"
+            id="link43"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -247,7 +247,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link43"
+            id="link44"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -282,7 +282,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link44"
+            id="link45"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -317,7 +317,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link45"
+            id="link46"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -352,7 +352,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M517.5,37.686C628.25,37.686,628.25,36,739,36L739,84.493C628.25,84.493,628.25,86.18,517.5,86.18Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link46"
+            id="link47"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -387,7 +387,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M517.5,86.18C628.25,86.18,628.25,92.493,739,92.493L739,181.397C628.25,181.397,628.25,175.084,517.5,175.084Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link47"
+            id="link48"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -422,7 +422,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M517.5,270.853C628.25,270.853,628.25,271.543,739,271.543L739,368.529C628.25,368.529,628.25,367.84,517.5,367.84Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link48"
+            id="link49"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -457,7 +457,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link49"
+            id="link50"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -480,14 +480,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
             }
       >
         <g
-          id="nodeGElement4"
+          id="nodeGElement5"
         >
           <rect
             aria-label="node192.168.42.72with weight80"
             data-is-focusable={true}
             fill="#8764B8"
             height={129.31506849315068}
-            id="nodeBar3"
+            id="nodeBar4"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -522,7 +522,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar3-name"
+                id="nodeBar4-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -548,14 +548,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
           </g>
         </g>
         <g
-          id="nodeGElement7"
+          id="nodeGElement8"
         >
           <rect
             aria-label="node172.152.48.13with weight78"
             data-is-focusable={true}
             fill="#8764B8"
             height={126.08219178082172}
-            id="nodeBar6"
+            id="nodeBar7"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -590,7 +590,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar6-name"
+                id="nodeBar7-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -616,14 +616,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
           </g>
         </g>
         <g
-          id="nodeGElement10"
+          id="nodeGElement11"
         >
           <rect
             aria-label="node124.360.55.1with weight14"
             data-is-focusable={true}
             fill="#8764B8"
             height={22.630136986301352}
-            id="nodeBar9"
+            id="nodeBar10"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -637,14 +637,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
           />
         </g>
         <g
-          id="nodeGElement13"
+          id="nodeGElement14"
         >
           <rect
             aria-label="node192.564.10.2with weight27"
             data-is-focusable={true}
             fill="#8764B8"
             height={43.643835616438366}
-            id="nodeBar12"
+            id="nodeBar13"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -679,7 +679,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar12-name"
+                id="nodeBar13-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -705,14 +705,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
           </g>
         </g>
         <g
-          id="nodeGElement16"
+          id="nodeGElement17"
         >
           <rect
             aria-label="node124.124.50.1with weight10"
             data-is-focusable={true}
             fill="#8764B8"
             height={16.16438356164383}
-            id="nodeBar15"
+            id="nodeBar16"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -726,14 +726,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
           />
         </g>
         <g
-          id="nodeGElement19"
+          id="nodeGElement20"
         >
           <rect
             aria-label="node172.630.89.4with weight10"
             data-is-focusable={true}
             fill="#8764B8"
             height={16.16438356164383}
-            id="nodeBar18"
+            id="nodeBar19"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -747,14 +747,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
           />
         </g>
         <g
-          id="nodeGElement22"
+          id="nodeGElement23"
         >
           <rect
             aria-label="nodeinboxwith weight130"
             data-is-focusable={true}
             fill="#0E7878"
             height={210.13698630136994}
-            id="nodeBar21"
+            id="nodeBar22"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -789,7 +789,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar21-name"
+                id="nodeBar22-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -815,14 +815,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
           </g>
         </g>
         <g
-          id="nodeGElement25"
+          id="nodeGElement26"
         >
           <rect
             aria-label="nodeJunk Folderwith weight69"
             data-is-focusable={true}
             fill="#0E7878"
             height={111.53424657534248}
-            id="nodeBar24"
+            id="nodeBar25"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -857,7 +857,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar24-name"
+                id="nodeBar25-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -883,14 +883,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
           </g>
         </g>
         <g
-          id="nodeGElement28"
+          id="nodeGElement29"
         >
           <rect
             aria-label="nodeDeleted Folderwith weight20"
             data-is-focusable={true}
             fill="#0E7878"
             height={32.32876712328766}
-            id="nodeBar27"
+            id="nodeBar28"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -925,7 +925,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar27-name"
+                id="nodeBar28-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -951,14 +951,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
           </g>
         </g>
         <g
-          id="nodeGElement31"
+          id="nodeGElement32"
         >
           <rect
             aria-label="nodeClickedwith weight30"
             data-is-focusable={true}
             fill="#4F6BED"
             height={48.49315068493148}
-            id="nodeBar30"
+            id="nodeBar31"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -993,7 +993,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar30-name"
+                id="nodeBar31-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -1019,14 +1019,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
           </g>
         </g>
         <g
-          id="nodeGElement34"
+          id="nodeGElement35"
         >
           <rect
             aria-label="nodeOpenedwith weight55"
             data-is-focusable={true}
             fill="#4F6BED"
             height={88.90410958904114}
-            id="nodeBar33"
+            id="nodeBar34"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -1061,7 +1061,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar33-name"
+                id="nodeBar34-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -1087,14 +1087,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
           </g>
         </g>
         <g
-          id="nodeGElement37"
+          id="nodeGElement38"
         >
           <rect
             aria-label="node No further action  requiredwith weight62"
             data-is-focusable={true}
             fill="#4F6BED"
             height={100.21917808219177}
-            id="nodeBar36"
+            id="nodeBar37"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -1129,7 +1129,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar36-name"
+                id="nodeBar37-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -1185,14 +1185,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone103"
+    data-focuszone-id="FocusZone105"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       height={436}
-      id="sankeyChart102"
+      id="sankeyChart104"
       width={864}
     >
       <g
@@ -1211,7 +1211,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-0"
+              id="gradient-link54-0"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1232,7 +1232,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link90"
+            id="link92"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1246,7 +1246,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-1"
+              id="gradient-link54-1"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1267,7 +1267,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M172,173.315C282.75,173.315,282.75,167.002,393.5,167.002L393.5,247.823C282.75,247.823,282.75,254.137,172,254.137Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link91"
+            id="link93"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1281,7 +1281,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-2"
+              id="gradient-link54-2"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1302,7 +1302,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link92"
+            id="link94"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1316,7 +1316,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-3"
+              id="gradient-link54-3"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1337,7 +1337,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link93"
+            id="link95"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1351,7 +1351,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-4"
+              id="gradient-link54-4"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1372,7 +1372,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link94"
+            id="link96"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1386,7 +1386,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-5"
+              id="gradient-link54-5"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1407,7 +1407,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link95"
+            id="link97"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1421,7 +1421,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-6"
+              id="gradient-link54-6"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1442,7 +1442,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link96"
+            id="link98"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1456,7 +1456,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-7"
+              id="gradient-link54-7"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1477,7 +1477,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link97"
+            id="link99"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1491,7 +1491,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-8"
+              id="gradient-link54-8"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1512,7 +1512,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M517.5,37.686C628.25,37.686,628.25,36,739,36L739,84.493C628.25,84.493,628.25,86.18,517.5,86.18Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link98"
+            id="link100"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1526,7 +1526,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-9"
+              id="gradient-link54-9"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1547,7 +1547,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M517.5,86.18C628.25,86.18,628.25,92.493,739,92.493L739,181.397C628.25,181.397,628.25,175.084,517.5,175.084Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link99"
+            id="link101"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1561,7 +1561,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-10"
+              id="gradient-link54-10"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1582,7 +1582,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M517.5,270.853C628.25,270.853,628.25,271.543,739,271.543L739,368.529C628.25,368.529,628.25,367.84,517.5,367.84Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link100"
+            id="link102"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1596,7 +1596,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-11"
+              id="gradient-link54-11"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -1617,7 +1617,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link101"
+            id="link103"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -1640,14 +1640,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
             }
       >
         <g
-          id="nodeGElement56"
+          id="nodeGElement58"
         >
           <rect
             aria-label="node192.168.42.72with weight80"
             data-is-focusable={true}
             fill="#E3008C"
             height={129.31506849315068}
-            id="nodeBar55"
+            id="nodeBar57"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -1682,7 +1682,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar55-name"
+                id="nodeBar57-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -1708,14 +1708,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
           </g>
         </g>
         <g
-          id="nodeGElement59"
+          id="nodeGElement61"
         >
           <rect
             aria-label="node172.152.48.13with weight78"
             data-is-focusable={true}
             fill="#00A2AD"
             height={126.08219178082172}
-            id="nodeBar58"
+            id="nodeBar60"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -1750,7 +1750,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar58-name"
+                id="nodeBar60-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -1776,14 +1776,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
           </g>
         </g>
         <g
-          id="nodeGElement62"
+          id="nodeGElement64"
         >
           <rect
             aria-label="node124.360.55.1with weight14"
             data-is-focusable={true}
             fill="#022F22"
             height={22.630136986301352}
-            id="nodeBar61"
+            id="nodeBar63"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -1797,14 +1797,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
           />
         </g>
         <g
-          id="nodeGElement65"
+          id="nodeGElement67"
         >
           <rect
             aria-label="node192.564.10.2with weight27"
             data-is-focusable={true}
             fill="#00188F"
             height={43.643835616438366}
-            id="nodeBar64"
+            id="nodeBar66"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -1838,7 +1838,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar64-name"
+                id="nodeBar66-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -1864,14 +1864,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
           </g>
         </g>
         <g
-          id="nodeGElement68"
+          id="nodeGElement70"
         >
           <rect
             aria-label="node124.124.50.1with weight10"
             data-is-focusable={true}
             fill="#E3008C"
             height={16.16438356164383}
-            id="nodeBar67"
+            id="nodeBar69"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -1885,14 +1885,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
           />
         </g>
         <g
-          id="nodeGElement71"
+          id="nodeGElement73"
         >
           <rect
             aria-label="node172.630.89.4with weight10"
             data-is-focusable={true}
             fill="#00A2AD"
             height={16.16438356164383}
-            id="nodeBar70"
+            id="nodeBar72"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -1906,14 +1906,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
           />
         </g>
         <g
-          id="nodeGElement74"
+          id="nodeGElement76"
         >
           <rect
             aria-label="nodeinboxwith weight130"
             data-is-focusable={true}
             fill="#022F22"
             height={210.13698630136994}
-            id="nodeBar73"
+            id="nodeBar75"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -1948,7 +1948,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar73-name"
+                id="nodeBar75-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -1974,14 +1974,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
           </g>
         </g>
         <g
-          id="nodeGElement77"
+          id="nodeGElement79"
         >
           <rect
             aria-label="nodeJunk Folderwith weight69"
             data-is-focusable={true}
             fill="#00188F"
             height={111.53424657534248}
-            id="nodeBar76"
+            id="nodeBar78"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2015,7 +2015,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar76-name"
+                id="nodeBar78-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -2041,14 +2041,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
           </g>
         </g>
         <g
-          id="nodeGElement80"
+          id="nodeGElement82"
         >
           <rect
             aria-label="nodeDeleted Folderwith weight20"
             data-is-focusable={true}
             fill="#E3008C"
             height={32.32876712328766}
-            id="nodeBar79"
+            id="nodeBar81"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2083,7 +2083,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar79-name"
+                id="nodeBar81-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -2109,14 +2109,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
           </g>
         </g>
         <g
-          id="nodeGElement83"
+          id="nodeGElement85"
         >
           <rect
             aria-label="nodeClickedwith weight30"
             data-is-focusable={true}
             fill="#00A2AD"
             height={48.49315068493148}
-            id="nodeBar82"
+            id="nodeBar84"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2151,7 +2151,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar82-name"
+                id="nodeBar84-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -2177,14 +2177,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
           </g>
         </g>
         <g
-          id="nodeGElement86"
+          id="nodeGElement88"
         >
           <rect
             aria-label="nodeOpenedwith weight55"
             data-is-focusable={true}
             fill="#022F22"
             height={88.90410958904114}
-            id="nodeBar85"
+            id="nodeBar87"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2219,7 +2219,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar85-name"
+                id="nodeBar87-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -2245,14 +2245,14 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
           </g>
         </g>
         <g
-          id="nodeGElement89"
+          id="nodeGElement91"
         >
           <rect
             aria-label="node No further action  requiredwith weight62"
             data-is-focusable={true}
             fill="#00188F"
             height={100.21917808219177}
-            id="nodeBar88"
+            id="nodeBar90"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2286,7 +2286,7 @@ exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nod
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar88-name"
+                id="nodeBar90-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -2342,14 +2342,14 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone85"
+    data-focuszone-id="FocusZone87"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       height={436}
-      id="sankeyChart84"
+      id="sankeyChart86"
       width={864}
     >
       <g
@@ -2368,7 +2368,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-0"
+              id="gradient-link54-0"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -2389,7 +2389,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
             d="M172,36C455.5,36,455.5,47.952,739,47.952L739,51.422C455.5,51.422,455.5,39.471,172,39.471Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link78"
+            id="link80"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -2403,7 +2403,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-1"
+              id="gradient-link54-1"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -2424,7 +2424,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
             d="M172,47.471C455.5,47.471,455.5,51.422,739,51.422L739,54.893C455.5,54.893,455.5,50.941,172,50.941Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link79"
+            id="link81"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -2438,7 +2438,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-2"
+              id="gradient-link54-2"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -2459,7 +2459,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
             d="M172,58.941C455.5,58.941,455.5,54.893,739,54.893L739,58.363C455.5,58.363,455.5,62.412,172,62.412Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link80"
+            id="link82"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -2473,7 +2473,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-3"
+              id="gradient-link54-3"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -2494,7 +2494,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
             d="M172,70.412C455.5,70.412,455.5,58.363,739,58.363L739,61.834C455.5,61.834,455.5,73.882,172,73.882Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link81"
+            id="link83"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -2508,7 +2508,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-4"
+              id="gradient-link54-4"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -2529,7 +2529,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
             d="M172,81.882C455.5,81.882,455.5,82.445,739,82.445L739,394.798C455.5,394.798,455.5,394.235,172,394.235Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link82"
+            id="link84"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -2543,7 +2543,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
         <g>
           <defs>
             <linearGradient
-              id="gradient-link53-5"
+              id="gradient-link54-5"
               x1="0%"
               x2="100%"
               y1="0%"
@@ -2564,7 +2564,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
             d="M172,402.235C455.5,402.235,455.5,394.798,739,394.798L739,422.562C455.5,422.562,455.5,430,172,430Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link83"
+            id="link85"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -2587,14 +2587,14 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
             }
       >
         <g
-          id="nodeGElement56"
+          id="nodeGElement58"
         >
           <rect
             aria-label="nodenode0with weight5"
             data-is-focusable={true}
             fill="#0078D4"
             height={3.470588235294116}
-            id="nodeBar55"
+            id="nodeBar57"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2608,14 +2608,14 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
           />
         </g>
         <g
-          id="nodeGElement59"
+          id="nodeGElement61"
         >
           <rect
             aria-label="nodenode1with weight5"
             data-is-focusable={true}
             fill="#0078D4"
             height={3.470588235294116}
-            id="nodeBar58"
+            id="nodeBar60"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2629,14 +2629,14 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
           />
         </g>
         <g
-          id="nodeGElement62"
+          id="nodeGElement64"
         >
           <rect
             aria-label="nodenode2with weight5"
             data-is-focusable={true}
             fill="#0078D4"
             height={3.470588235294116}
-            id="nodeBar61"
+            id="nodeBar63"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2650,14 +2650,14 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
           />
         </g>
         <g
-          id="nodeGElement65"
+          id="nodeGElement67"
         >
           <rect
             aria-label="nodenode3with weight5"
             data-is-focusable={true}
             fill="#0078D4"
             height={3.470588235294116}
-            id="nodeBar64"
+            id="nodeBar66"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2671,14 +2671,14 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
           />
         </g>
         <g
-          id="nodeGElement68"
+          id="nodeGElement70"
         >
           <rect
             aria-label="nodenode4with weight900"
             data-is-focusable={true}
             fill="#0078D4"
             height={312.3529411764705}
-            id="nodeBar67"
+            id="nodeBar69"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2713,7 +2713,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar67-name"
+                id="nodeBar69-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -2739,14 +2739,14 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
           </g>
         </g>
         <g
-          id="nodeGElement71"
+          id="nodeGElement73"
         >
           <rect
             aria-label="nodenode5with weight80"
             data-is-focusable={true}
             fill="#0078D4"
             height={27.764705882352928}
-            id="nodeBar70"
+            id="nodeBar72"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2781,7 +2781,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar70-name"
+                id="nodeBar72-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -2807,14 +2807,14 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
           </g>
         </g>
         <g
-          id="nodeGElement74"
+          id="nodeGElement76"
         >
           <rect
             aria-label="nodenode6with weight20"
             data-is-focusable={true}
             fill="#E3008C"
             height={13.882352941176471}
-            id="nodeBar73"
+            id="nodeBar75"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2828,14 +2828,14 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
           />
         </g>
         <g
-          id="nodeGElement77"
+          id="nodeGElement79"
         >
           <rect
             aria-label="nodenode7with weight980"
             data-is-focusable={true}
             fill="#E3008C"
             height={340.1176470588236}
-            id="nodeBar76"
+            id="nodeBar78"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2870,7 +2870,7 @@ exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on provi
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar76-name"
+                id="nodeBar78-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -2926,14 +2926,14 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone51"
+    data-focuszone-id="FocusZone52"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       height={436}
-      id="sankeyChart100"
+      id="sankeyChart101"
       width={864}
     >
       <g
@@ -2975,7 +2975,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link88"
+            id="link89"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3012,7 +3012,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             d="M172,173.315C282.75,173.315,282.75,167.002,393.5,167.002L393.5,247.823C282.75,247.823,282.75,254.137,172,254.137Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link89"
+            id="link90"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3049,7 +3049,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link90"
+            id="link91"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3087,7 +3087,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             data-is-focusable={true}
             fill="#8764B8"
             fillOpacity={1}
-            id="link91"
+            id="link92"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3124,7 +3124,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link92"
+            id="link93"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3161,7 +3161,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link93"
+            id="link94"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3198,7 +3198,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link94"
+            id="link95"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3235,7 +3235,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link95"
+            id="link96"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3272,7 +3272,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             d="M517.5,37.686C628.25,37.686,628.25,36,739,36L739,84.493C628.25,84.493,628.25,86.18,517.5,86.18Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link96"
+            id="link97"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3309,7 +3309,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             d="M517.5,86.18C628.25,86.18,628.25,92.493,739,92.493L739,181.397C628.25,181.397,628.25,175.084,517.5,175.084Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link97"
+            id="link98"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3347,7 +3347,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             data-is-focusable={true}
             fill="#8764B8"
             fillOpacity={1}
-            id="link98"
+            id="link99"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3384,7 +3384,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link99"
+            id="link100"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -3407,14 +3407,14 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             }
       >
         <g
-          id="nodeGElement54"
+          id="nodeGElement55"
           key="0"
         >
           <rect
             aria-label="node192.168.42.72with weight80"
             data-is-focusable={true}
             height={129.31506849315068}
-            id="nodeBar53"
+            id="nodeBar54"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3449,7 +3449,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
                 fill="#323130"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar53-name"
+                id="nodeBar54-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -3475,14 +3475,14 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement57"
+          id="nodeGElement58"
           key="1"
         >
           <rect
             aria-label="node172.152.48.13with weight78"
             data-is-focusable={true}
             height={126.08219178082172}
-            id="nodeBar56"
+            id="nodeBar57"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3517,7 +3517,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
                 fill="#323130"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar56-name"
+                id="nodeBar57-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -3543,7 +3543,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement60"
+          id="nodeGElement61"
           key="2"
         >
           <rect
@@ -3551,7 +3551,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             data-is-focusable={true}
             fill="#8764B8"
             height={22.630136986301352}
-            id="nodeBar59"
+            id="nodeBar60"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3565,14 +3565,14 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
           />
         </g>
         <g
-          id="nodeGElement63"
+          id="nodeGElement64"
           key="3"
         >
           <rect
             aria-label="node192.564.10.2with weight27"
             data-is-focusable={true}
             height={43.643835616438366}
-            id="nodeBar62"
+            id="nodeBar63"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3607,7 +3607,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
                 fill="#323130"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar62-name"
+                id="nodeBar63-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -3633,14 +3633,14 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement66"
+          id="nodeGElement67"
           key="4"
         >
           <rect
             aria-label="node124.124.50.1with weight10"
             data-is-focusable={true}
             height={16.16438356164383}
-            id="nodeBar65"
+            id="nodeBar66"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3654,14 +3654,14 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
           />
         </g>
         <g
-          id="nodeGElement69"
+          id="nodeGElement70"
           key="5"
         >
           <rect
             aria-label="node172.630.89.4with weight10"
             data-is-focusable={true}
             height={16.16438356164383}
-            id="nodeBar68"
+            id="nodeBar69"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3675,14 +3675,14 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
           />
         </g>
         <g
-          id="nodeGElement72"
+          id="nodeGElement73"
           key="6"
         >
           <rect
             aria-label="nodeinboxwith weight130"
             data-is-focusable={true}
             height={210.13698630136994}
-            id="nodeBar71"
+            id="nodeBar72"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3717,7 +3717,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
                 fill="#323130"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar71-name"
+                id="nodeBar72-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -3743,7 +3743,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement75"
+          id="nodeGElement76"
           key="7"
         >
           <rect
@@ -3751,7 +3751,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             data-is-focusable={true}
             fill="#8764B8"
             height={111.53424657534248}
-            id="nodeBar74"
+            id="nodeBar75"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3786,7 +3786,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar74-name"
+                id="nodeBar75-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -3812,14 +3812,14 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement78"
+          id="nodeGElement79"
           key="8"
         >
           <rect
             aria-label="nodeDeleted Folderwith weight20"
             data-is-focusable={true}
             height={32.32876712328766}
-            id="nodeBar77"
+            id="nodeBar78"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3854,7 +3854,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
                 fill="#323130"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar77-name"
+                id="nodeBar78-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -3880,14 +3880,14 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement81"
+          id="nodeGElement82"
           key="9"
         >
           <rect
             aria-label="nodeClickedwith weight30"
             data-is-focusable={true}
             height={48.49315068493148}
-            id="nodeBar80"
+            id="nodeBar81"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3922,7 +3922,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
                 fill="#323130"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar80-name"
+                id="nodeBar81-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -3948,14 +3948,14 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement84"
+          id="nodeGElement85"
           key="10"
         >
           <rect
             aria-label="nodeOpenedwith weight55"
             data-is-focusable={true}
             height={88.90410958904114}
-            id="nodeBar83"
+            id="nodeBar84"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3990,7 +3990,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
                 fill="#323130"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar83-name"
+                id="nodeBar84-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -4016,7 +4016,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement87"
+          id="nodeGElement88"
           key="11"
         >
           <rect
@@ -4024,7 +4024,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
             data-is-focusable={true}
             fill="#8764B8"
             height={100.21917808219177}
-            id="nodeBar86"
+            id="nodeBar87"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -4059,7 +4059,7 @@ exports[`SankeyChart - mouse events Should render callout correctly on mouseover
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar86-name"
+                id="nodeBar87-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -4118,14 +4118,14 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone51"
+    data-focuszone-id="FocusZone52"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       height={436}
-      id="sankeyChart100"
+      id="sankeyChart101"
       width={864}
     >
       <g
@@ -4167,7 +4167,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link88"
+            id="link89"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4205,7 +4205,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="url(#gradient-link1-1)"
             fillOpacity={0.3}
-            id="link89"
+            id="link90"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4242,7 +4242,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link90"
+            id="link91"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4279,7 +4279,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link91"
+            id="link92"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4316,7 +4316,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link92"
+            id="link93"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4353,7 +4353,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link93"
+            id="link94"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4390,7 +4390,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link94"
+            id="link95"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4427,7 +4427,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link95"
+            id="link96"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4465,7 +4465,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="url(#gradient-link1-8)"
             fillOpacity={0.3}
-            id="link96"
+            id="link97"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4503,7 +4503,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="url(#gradient-link1-9)"
             fillOpacity={0.3}
-            id="link97"
+            id="link98"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4540,7 +4540,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             d="M517.5,270.853C628.25,270.853,628.25,271.543,739,271.543L739,368.529C628.25,368.529,628.25,367.84,517.5,367.84Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link98"
+            id="link99"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4577,7 +4577,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link99"
+            id="link100"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -4600,7 +4600,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             }
       >
         <g
-          id="nodeGElement54"
+          id="nodeGElement55"
           key="0"
         >
           <rect
@@ -4608,7 +4608,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={129.31506849315068}
-            id="nodeBar53"
+            id="nodeBar54"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -4643,7 +4643,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar53-name"
+                id="nodeBar54-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -4669,7 +4669,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement57"
+          id="nodeGElement58"
           key="1"
         >
           <rect
@@ -4677,7 +4677,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={126.08219178082172}
-            id="nodeBar56"
+            id="nodeBar57"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -4712,7 +4712,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar56-name"
+                id="nodeBar57-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -4738,7 +4738,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement60"
+          id="nodeGElement61"
           key="2"
         >
           <rect
@@ -4746,7 +4746,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={22.630136986301352}
-            id="nodeBar59"
+            id="nodeBar60"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -4760,7 +4760,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
           />
         </g>
         <g
-          id="nodeGElement63"
+          id="nodeGElement64"
           key="3"
         >
           <rect
@@ -4768,7 +4768,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={43.643835616438366}
-            id="nodeBar62"
+            id="nodeBar63"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -4803,7 +4803,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar62-name"
+                id="nodeBar63-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -4829,7 +4829,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement66"
+          id="nodeGElement67"
           key="4"
         >
           <rect
@@ -4837,7 +4837,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={16.16438356164383}
-            id="nodeBar65"
+            id="nodeBar66"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -4851,7 +4851,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
           />
         </g>
         <g
-          id="nodeGElement69"
+          id="nodeGElement70"
           key="5"
         >
           <rect
@@ -4859,7 +4859,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={16.16438356164383}
-            id="nodeBar68"
+            id="nodeBar69"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -4873,7 +4873,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
           />
         </g>
         <g
-          id="nodeGElement72"
+          id="nodeGElement73"
           key="6"
         >
           <rect
@@ -4881,7 +4881,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#0E7878"
             height={210.13698630136994}
-            id="nodeBar71"
+            id="nodeBar72"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -4916,7 +4916,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar71-name"
+                id="nodeBar72-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -4942,7 +4942,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement75"
+          id="nodeGElement76"
           key="7"
         >
           <rect
@@ -4950,7 +4950,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#0E7878"
             height={111.53424657534248}
-            id="nodeBar74"
+            id="nodeBar75"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -4985,7 +4985,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar74-name"
+                id="nodeBar75-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -5011,7 +5011,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement78"
+          id="nodeGElement79"
           key="8"
         >
           <rect
@@ -5019,7 +5019,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#0E7878"
             height={32.32876712328766}
-            id="nodeBar77"
+            id="nodeBar78"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -5054,7 +5054,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar77-name"
+                id="nodeBar78-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -5080,7 +5080,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement81"
+          id="nodeGElement82"
           key="9"
         >
           <rect
@@ -5088,7 +5088,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#4F6BED"
             height={48.49315068493148}
-            id="nodeBar80"
+            id="nodeBar81"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -5123,7 +5123,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar80-name"
+                id="nodeBar81-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -5149,7 +5149,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement84"
+          id="nodeGElement85"
           key="10"
         >
           <rect
@@ -5157,7 +5157,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#4F6BED"
             height={88.90410958904114}
-            id="nodeBar83"
+            id="nodeBar84"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -5192,7 +5192,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar83-name"
+                id="nodeBar84-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -5218,7 +5218,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement87"
+          id="nodeGElement88"
           key="11"
         >
           <rect
@@ -5226,7 +5226,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
             data-is-focusable={true}
             fill="#4F6BED"
             height={100.21917808219177}
-            id="nodeBar86"
+            id="nodeBar87"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -5261,7 +5261,7 @@ exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar86-name"
+                id="nodeBar87-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -5320,14 +5320,14 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone51"
+    data-focuszone-id="FocusZone52"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       height={436}
-      id="sankeyChart100"
+      id="sankeyChart101"
       width={864}
     >
       <g
@@ -5369,7 +5369,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link88"
+            id="link89"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5407,7 +5407,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             fillOpacity={1}
-            id="link89"
+            id="link90"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5445,7 +5445,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             fillOpacity={1}
-            id="link90"
+            id="link91"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5482,7 +5482,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link91"
+            id="link92"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5519,7 +5519,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link92"
+            id="link93"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5556,7 +5556,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link93"
+            id="link94"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5593,7 +5593,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link94"
+            id="link95"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5630,7 +5630,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link95"
+            id="link96"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5668,7 +5668,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             fillOpacity={1}
-            id="link96"
+            id="link97"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5706,7 +5706,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             fillOpacity={1}
-            id="link97"
+            id="link98"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5744,7 +5744,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             fillOpacity={1}
-            id="link98"
+            id="link99"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5781,7 +5781,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link99"
+            id="link100"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -5804,14 +5804,14 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             }
       >
         <g
-          id="nodeGElement54"
+          id="nodeGElement55"
           key="0"
         >
           <rect
             aria-label="node192.168.42.72with weight80"
             data-is-focusable={true}
             height={129.31506849315068}
-            id="nodeBar53"
+            id="nodeBar54"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -5846,7 +5846,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
                 fill="#323130"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar53-name"
+                id="nodeBar54-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -5872,7 +5872,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement57"
+          id="nodeGElement58"
           key="1"
         >
           <rect
@@ -5880,7 +5880,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={126.08219178082172}
-            id="nodeBar56"
+            id="nodeBar57"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -5915,7 +5915,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar56-name"
+                id="nodeBar57-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -5941,14 +5941,14 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement60"
+          id="nodeGElement61"
           key="2"
         >
           <rect
             aria-label="node124.360.55.1with weight14"
             data-is-focusable={true}
             height={22.630136986301352}
-            id="nodeBar59"
+            id="nodeBar60"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -5962,14 +5962,14 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
           />
         </g>
         <g
-          id="nodeGElement63"
+          id="nodeGElement64"
           key="3"
         >
           <rect
             aria-label="node192.564.10.2with weight27"
             data-is-focusable={true}
             height={43.643835616438366}
-            id="nodeBar62"
+            id="nodeBar63"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -6004,7 +6004,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
                 fill="#323130"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar62-name"
+                id="nodeBar63-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -6030,14 +6030,14 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement66"
+          id="nodeGElement67"
           key="4"
         >
           <rect
             aria-label="node124.124.50.1with weight10"
             data-is-focusable={true}
             height={16.16438356164383}
-            id="nodeBar65"
+            id="nodeBar66"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -6051,14 +6051,14 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
           />
         </g>
         <g
-          id="nodeGElement69"
+          id="nodeGElement70"
           key="5"
         >
           <rect
             aria-label="node172.630.89.4with weight10"
             data-is-focusable={true}
             height={16.16438356164383}
-            id="nodeBar68"
+            id="nodeBar69"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -6072,7 +6072,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
           />
         </g>
         <g
-          id="nodeGElement72"
+          id="nodeGElement73"
           key="6"
         >
           <rect
@@ -6080,7 +6080,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={210.13698630136994}
-            id="nodeBar71"
+            id="nodeBar72"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -6115,7 +6115,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar71-name"
+                id="nodeBar72-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -6141,7 +6141,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement75"
+          id="nodeGElement76"
           key="7"
         >
           <rect
@@ -6149,7 +6149,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={111.53424657534248}
-            id="nodeBar74"
+            id="nodeBar75"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -6184,7 +6184,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar74-name"
+                id="nodeBar75-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -6210,14 +6210,14 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement78"
+          id="nodeGElement79"
           key="8"
         >
           <rect
             aria-label="nodeDeleted Folderwith weight20"
             data-is-focusable={true}
             height={32.32876712328766}
-            id="nodeBar77"
+            id="nodeBar78"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -6252,7 +6252,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
                 fill="#323130"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar77-name"
+                id="nodeBar78-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -6278,7 +6278,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement81"
+          id="nodeGElement82"
           key="9"
         >
           <rect
@@ -6286,7 +6286,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={48.49315068493148}
-            id="nodeBar80"
+            id="nodeBar81"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -6321,7 +6321,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar80-name"
+                id="nodeBar81-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -6347,7 +6347,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement84"
+          id="nodeGElement85"
           key="10"
         >
           <rect
@@ -6355,7 +6355,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={88.90410958904114}
-            id="nodeBar83"
+            id="nodeBar84"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -6390,7 +6390,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar83-name"
+                id="nodeBar84-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -6416,7 +6416,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
           </g>
         </g>
         <g
-          id="nodeGElement87"
+          id="nodeGElement88"
           key="11"
         >
           <rect
@@ -6424,7 +6424,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
             data-is-focusable={true}
             fill="#8764B8"
             height={100.21917808219177}
-            id="nodeBar86"
+            id="nodeBar87"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -6459,7 +6459,7 @@ exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar86-name"
+                id="nodeBar87-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -6515,14 +6515,14 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone51"
+    data-focuszone-id="FocusZone52"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       height={436}
-      id="sankeyChart50"
+      id="sankeyChart51"
       width={864}
     >
       <g
@@ -6564,7 +6564,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link38"
+            id="link39"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6601,7 +6601,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M172,173.315C282.75,173.315,282.75,167.002,393.5,167.002L393.5,247.823C282.75,247.823,282.75,254.137,172,254.137Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link39"
+            id="link40"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6638,7 +6638,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link40"
+            id="link41"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6675,7 +6675,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link41"
+            id="link42"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6712,7 +6712,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link42"
+            id="link43"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6749,7 +6749,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link43"
+            id="link44"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6786,7 +6786,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link44"
+            id="link45"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6823,7 +6823,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link45"
+            id="link46"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6860,7 +6860,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M517.5,37.686C628.25,37.686,628.25,36,739,36L739,84.493C628.25,84.493,628.25,86.18,517.5,86.18Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link46"
+            id="link47"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6897,7 +6897,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M517.5,86.18C628.25,86.18,628.25,92.493,739,92.493L739,181.397C628.25,181.397,628.25,175.084,517.5,175.084Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link47"
+            id="link48"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6934,7 +6934,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M517.5,270.853C628.25,270.853,628.25,271.543,739,271.543L739,368.529C628.25,368.529,628.25,367.84,517.5,367.84Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link48"
+            id="link49"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6971,7 +6971,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
             data-is-focusable={true}
             fillOpacity={1}
-            id="link49"
+            id="link50"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseOut={[Function]}
@@ -6994,7 +6994,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             }
       >
         <g
-          id="nodeGElement4"
+          id="nodeGElement5"
           key="0"
         >
           <rect
@@ -7002,7 +7002,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#8764B8"
             height={129.31506849315068}
-            id="nodeBar3"
+            id="nodeBar4"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7037,7 +7037,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar3-name"
+                id="nodeBar4-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -7063,7 +7063,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement7"
+          id="nodeGElement8"
           key="1"
         >
           <rect
@@ -7071,7 +7071,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#8764B8"
             height={126.08219178082172}
-            id="nodeBar6"
+            id="nodeBar7"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7106,7 +7106,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar6-name"
+                id="nodeBar7-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -7132,7 +7132,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement10"
+          id="nodeGElement11"
           key="2"
         >
           <rect
@@ -7140,7 +7140,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#8764B8"
             height={22.630136986301352}
-            id="nodeBar9"
+            id="nodeBar10"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7154,7 +7154,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
           />
         </g>
         <g
-          id="nodeGElement13"
+          id="nodeGElement14"
           key="3"
         >
           <rect
@@ -7162,7 +7162,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#8764B8"
             height={43.643835616438366}
-            id="nodeBar12"
+            id="nodeBar13"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7197,7 +7197,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar12-name"
+                id="nodeBar13-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -7223,7 +7223,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement16"
+          id="nodeGElement17"
           key="4"
         >
           <rect
@@ -7231,7 +7231,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#8764B8"
             height={16.16438356164383}
-            id="nodeBar15"
+            id="nodeBar16"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7245,7 +7245,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
           />
         </g>
         <g
-          id="nodeGElement19"
+          id="nodeGElement20"
           key="5"
         >
           <rect
@@ -7253,7 +7253,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#8764B8"
             height={16.16438356164383}
-            id="nodeBar18"
+            id="nodeBar19"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7267,7 +7267,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
           />
         </g>
         <g
-          id="nodeGElement22"
+          id="nodeGElement23"
           key="6"
         >
           <rect
@@ -7275,7 +7275,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#0E7878"
             height={210.13698630136994}
-            id="nodeBar21"
+            id="nodeBar22"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7310,7 +7310,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar21-name"
+                id="nodeBar22-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -7336,7 +7336,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement25"
+          id="nodeGElement26"
           key="7"
         >
           <rect
@@ -7344,7 +7344,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#0E7878"
             height={111.53424657534248}
-            id="nodeBar24"
+            id="nodeBar25"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7379,7 +7379,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar24-name"
+                id="nodeBar25-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -7405,7 +7405,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement28"
+          id="nodeGElement29"
           key="8"
         >
           <rect
@@ -7413,7 +7413,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#0E7878"
             height={32.32876712328766}
-            id="nodeBar27"
+            id="nodeBar28"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7448,7 +7448,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar27-name"
+                id="nodeBar28-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -7474,7 +7474,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement31"
+          id="nodeGElement32"
           key="9"
         >
           <rect
@@ -7482,7 +7482,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#4F6BED"
             height={48.49315068493148}
-            id="nodeBar30"
+            id="nodeBar31"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7517,7 +7517,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar30-name"
+                id="nodeBar31-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -7543,7 +7543,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement34"
+          id="nodeGElement35"
           key="10"
         >
           <rect
@@ -7551,7 +7551,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#4F6BED"
             height={88.90410958904114}
-            id="nodeBar33"
+            id="nodeBar34"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7586,7 +7586,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar33-name"
+                id="nodeBar34-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
@@ -7612,7 +7612,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
           </g>
         </g>
         <g
-          id="nodeGElement37"
+          id="nodeGElement38"
           key="11"
         >
           <rect
@@ -7620,7 +7620,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
             data-is-focusable={true}
             fill="#4F6BED"
             height={100.21917808219177}
-            id="nodeBar36"
+            id="nodeBar37"
             onFocus={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -7655,7 +7655,7 @@ exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover
                 fill="#FFFFFF"
                 fontSize={10}
                 fontWeight="regular"
-                id="nodeBar36-name"
+                id="nodeBar37-name"
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
                 textAnchor="start"
diff --git a/packages/react-charting/src/components/SankeyChart/__snapshots__/SankeyChartRTL.test.tsx.snap b/packages/react-charting/src/components/SankeyChart/__snapshots__/SankeyChartRTL.test.tsx.snap
new file mode 100644
index 0000000000000..88bbcc1d28bf7
--- /dev/null
+++ b/packages/react-charting/src/components/SankeyChart/__snapshots__/SankeyChartRTL.test.tsx.snap
@@ -0,0 +1,8146 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Sankey Chart snapShot testing renders Sankey correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone52"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={436}
+      id="sankeyChart51"
+      width={864}
+    >
+      <g
+        className=
+
+            {
+              fill: #ffffff;
+              stroke-width: 3px;
+              stroke: #000000;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+        strokeOpacity={1}
+      >
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-0"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.168.42.72toinboxwith weight80"
+            d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link39"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-1"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toinboxwith weight50"
+            d="M172,173.315C282.75,173.315,282.75,167.002,393.5,167.002L393.5,247.823C282.75,247.823,282.75,254.137,172,254.137Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link40"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-2"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toJunk Folderwith weight28"
+            d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link41"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-3"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.360.55.1toJunk Folderwith weight14"
+            d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link42"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-4"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toJunk Folderwith weight7"
+            d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link43"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-5"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toDeleted Folderwith weight20"
+            d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link44"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-6"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.124.50.1toJunk Folderwith weight10"
+            d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link45"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-7"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.630.89.4toJunk Folderwith weight10"
+            d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link46"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-8"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoClickedwith weight30"
+            d="M517.5,37.686C628.25,37.686,628.25,36,739,36L739,84.493C628.25,84.493,628.25,86.18,517.5,86.18Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link47"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-9"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoOpenedwith weight55"
+            d="M517.5,86.18C628.25,86.18,628.25,92.493,739,92.493L739,181.397C628.25,181.397,628.25,175.084,517.5,175.084Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link48"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-10"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromJunk Folderto No further action  requiredwith weight60"
+            d="M517.5,270.853C628.25,270.853,628.25,271.543,739,271.543L739,368.529C628.25,368.529,628.25,367.84,517.5,367.84Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link49"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link1-11"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromDeleted Folderto No further action  requiredwith weight2"
+            d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link50"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+      </g>
+      <g
+        className=
+
+            {
+              fill: #F5F5F5;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+      >
+        <g
+          id="nodeGElement5"
+        >
+          <rect
+            aria-label="node192.168.42.72with weight80"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={129.31506849315068}
+            id="nodeBar4"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar4-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={36}
+              >
+                192.168.42.72
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={36}
+            >
+              80
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement8"
+        >
+          <rect
+            aria-label="node172.152.48.13with weight78"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={126.08219178082172}
+            id="nodeBar7"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={173.31506849315068}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar7-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={173.31506849315068}
+              >
+                172.152.48.13
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={173.31506849315068}
+            >
+              78
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement11"
+        >
+          <rect
+            aria-label="node124.360.55.1with weight14"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={22.630136986301352}
+            id="nodeBar10"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={307.3972602739724}
+          />
+        </g>
+        <g
+          id="nodeGElement14"
+        >
+          <rect
+            aria-label="node192.564.10.2with weight27"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={43.643835616438366}
+            id="nodeBar13"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={362.1917808219178}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar13-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={362.1917808219178}
+              >
+                192.564.10.2
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={362.1917808219178}
+            >
+              27
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement17"
+        >
+          <rect
+            aria-label="node124.124.50.1with weight10"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={16.16438356164383}
+            id="nodeBar16"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={338.02739726027374}
+          />
+        </g>
+        <g
+          id="nodeGElement20"
+        >
+          <rect
+            aria-label="node172.630.89.4with weight10"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={16.16438356164383}
+            id="nodeBar19"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={413.83561643835617}
+          />
+        </g>
+        <g
+          id="nodeGElement23"
+        >
+          <rect
+            aria-label="nodeinboxwith weight130"
+            data-is-focusable={true}
+            fill="#0E7878"
+            height={210.13698630136994}
+            id="nodeBar22"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={37.68645072950067}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar22-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={37.68645072950067}
+              >
+                inbox
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={37.68645072950067}
+            >
+              130
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement26"
+        >
+          <rect
+            aria-label="nodeJunk Folderwith weight69"
+            data-is-focusable={true}
+            fill="#0E7878"
+            height={111.53424657534248}
+            id="nodeBar25"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={270.8534770168133}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar25-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={270.8534770168133}
+              >
+                Junk Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={270.8534770168133}
+            >
+              69
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement29"
+        >
+          <rect
+            aria-label="nodeDeleted Folderwith weight20"
+            data-is-focusable={true}
+            fill="#0E7878"
+            height={32.32876712328766}
+            id="nodeBar28"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={390.3877235921558}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar28-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={390.3877235921558}
+              >
+                Deleted Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0em"
+              dy="1em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={509.5}
+              y={390.3877235921558}
+            >
+              20
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement32"
+        >
+          <rect
+            aria-label="nodeClickedwith weight30"
+            data-is-focusable={true}
+            fill="#4F6BED"
+            height={48.49315068493148}
+            id="nodeBar31"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar31-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={36}
+              >
+                Clicked
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={36}
+            >
+              30
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement35"
+        >
+          <rect
+            aria-label="nodeOpenedwith weight55"
+            data-is-focusable={true}
+            fill="#4F6BED"
+            height={88.90410958904114}
+            id="nodeBar34"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={92.49315068493148}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar34-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={92.49315068493148}
+              >
+                Opened
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={92.49315068493148}
+            >
+              55
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement38"
+        >
+          <rect
+            aria-label="node No further action  requiredwith weight62"
+            data-is-focusable={true}
+            fill="#4F6BED"
+            height={100.21917808219177}
+            id="nodeBar37"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={271.54289868025126}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar37-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={271.54289868025126}
+              >
+                 No further action  required
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={271.54289868025126}
+            >
+              62
+            </text>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`Sankey Chart snapShot testing renders Sankey correctly on providing nodecolors and border colors  1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone105"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={436}
+      id="sankeyChart104"
+      width={864}
+    >
+      <g
+        className=
+
+            {
+              fill: #ffffff;
+              stroke-width: 3px;
+              stroke: #000000;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+        strokeOpacity={1}
+      >
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-0"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#E3008C"
+              />
+              <stop
+                offset="100%"
+                stopColor="#022F22"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.168.42.72toinboxwith weight80"
+            d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link92"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-1"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#00A2AD"
+              />
+              <stop
+                offset="100%"
+                stopColor="#022F22"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toinboxwith weight50"
+            d="M172,173.315C282.75,173.315,282.75,167.002,393.5,167.002L393.5,247.823C282.75,247.823,282.75,254.137,172,254.137Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link93"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-2"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#00A2AD"
+              />
+              <stop
+                offset="100%"
+                stopColor="#00188F"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toJunk Folderwith weight28"
+            d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link94"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-3"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#022F22"
+              />
+              <stop
+                offset="100%"
+                stopColor="#00188F"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.360.55.1toJunk Folderwith weight14"
+            d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link95"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-4"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#00188F"
+              />
+              <stop
+                offset="100%"
+                stopColor="#00188F"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toJunk Folderwith weight7"
+            d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link96"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-5"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#00188F"
+              />
+              <stop
+                offset="100%"
+                stopColor="#E3008C"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toDeleted Folderwith weight20"
+            d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link97"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-6"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#E3008C"
+              />
+              <stop
+                offset="100%"
+                stopColor="#00188F"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.124.50.1toJunk Folderwith weight10"
+            d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link98"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-7"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#00A2AD"
+              />
+              <stop
+                offset="100%"
+                stopColor="#00188F"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.630.89.4toJunk Folderwith weight10"
+            d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link99"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-8"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#022F22"
+              />
+              <stop
+                offset="100%"
+                stopColor="#00A2AD"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoClickedwith weight30"
+            d="M517.5,37.686C628.25,37.686,628.25,36,739,36L739,84.493C628.25,84.493,628.25,86.18,517.5,86.18Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link100"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-9"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#022F22"
+              />
+              <stop
+                offset="100%"
+                stopColor="#022F22"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoOpenedwith weight55"
+            d="M517.5,86.18C628.25,86.18,628.25,92.493,739,92.493L739,181.397C628.25,181.397,628.25,175.084,517.5,175.084Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link101"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-10"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#00188F"
+              />
+              <stop
+                offset="100%"
+                stopColor="#00188F"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromJunk Folderto No further action  requiredwith weight60"
+            d="M517.5,270.853C628.25,270.853,628.25,271.543,739,271.543L739,368.529C628.25,368.529,628.25,367.84,517.5,367.84Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link102"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-11"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#E3008C"
+              />
+              <stop
+                offset="100%"
+                stopColor="#00188F"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromDeleted Folderto No further action  requiredwith weight2"
+            d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link103"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+      </g>
+      <g
+        className=
+
+            {
+              fill: #F5F5F5;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+      >
+        <g
+          id="nodeGElement58"
+        >
+          <rect
+            aria-label="node192.168.42.72with weight80"
+            data-is-focusable={true}
+            fill="#E3008C"
+            height={129.31506849315068}
+            id="nodeBar57"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#002E39"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar57-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={36}
+              >
+                192.168.42.72
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={36}
+            >
+              80
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement61"
+        >
+          <rect
+            aria-label="node172.152.48.13with weight78"
+            data-is-focusable={true}
+            fill="#00A2AD"
+            height={126.08219178082172}
+            id="nodeBar60"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#43002C"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={173.31506849315068}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar60-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={173.31506849315068}
+              >
+                172.152.48.13
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={173.31506849315068}
+            >
+              78
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement64"
+        >
+          <rect
+            aria-label="node124.360.55.1with weight14"
+            data-is-focusable={true}
+            fill="#022F22"
+            height={22.630136986301352}
+            id="nodeBar63"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={307.3972602739724}
+          />
+        </g>
+        <g
+          id="nodeGElement67"
+        >
+          <rect
+            aria-label="node192.564.10.2with weight27"
+            data-is-focusable={true}
+            fill="#00188F"
+            height={43.643835616438366}
+            id="nodeBar66"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={362.1917808219178}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar66-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={362.1917808219178}
+              >
+                192.564.10.2
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={362.1917808219178}
+            >
+              27
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement70"
+        >
+          <rect
+            aria-label="node124.124.50.1with weight10"
+            data-is-focusable={true}
+            fill="#E3008C"
+            height={16.16438356164383}
+            id="nodeBar69"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#002E39"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={338.02739726027374}
+          />
+        </g>
+        <g
+          id="nodeGElement73"
+        >
+          <rect
+            aria-label="node172.630.89.4with weight10"
+            data-is-focusable={true}
+            fill="#00A2AD"
+            height={16.16438356164383}
+            id="nodeBar72"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#43002C"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={413.83561643835617}
+          />
+        </g>
+        <g
+          id="nodeGElement76"
+        >
+          <rect
+            aria-label="nodeinboxwith weight130"
+            data-is-focusable={true}
+            fill="#022F22"
+            height={210.13698630136994}
+            id="nodeBar75"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={37.68645072950067}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar75-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={37.68645072950067}
+              >
+                inbox
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={37.68645072950067}
+            >
+              130
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement79"
+        >
+          <rect
+            aria-label="nodeJunk Folderwith weight69"
+            data-is-focusable={true}
+            fill="#00188F"
+            height={111.53424657534248}
+            id="nodeBar78"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={270.8534770168133}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar78-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={270.8534770168133}
+              >
+                Junk Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={270.8534770168133}
+            >
+              69
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement82"
+        >
+          <rect
+            aria-label="nodeDeleted Folderwith weight20"
+            data-is-focusable={true}
+            fill="#E3008C"
+            height={32.32876712328766}
+            id="nodeBar81"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#002E39"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={390.3877235921558}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar81-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={390.3877235921558}
+              >
+                Deleted Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0em"
+              dy="1em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={509.5}
+              y={390.3877235921558}
+            >
+              20
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement85"
+        >
+          <rect
+            aria-label="nodeClickedwith weight30"
+            data-is-focusable={true}
+            fill="#00A2AD"
+            height={48.49315068493148}
+            id="nodeBar84"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#43002C"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar84-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={36}
+              >
+                Clicked
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={36}
+            >
+              30
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement88"
+        >
+          <rect
+            aria-label="nodeOpenedwith weight55"
+            data-is-focusable={true}
+            fill="#022F22"
+            height={88.90410958904114}
+            id="nodeBar87"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={92.49315068493148}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar87-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={92.49315068493148}
+              >
+                Opened
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={92.49315068493148}
+            >
+              55
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement91"
+        >
+          <rect
+            aria-label="node No further action  requiredwith weight62"
+            data-is-focusable={true}
+            fill="#00188F"
+            height={100.21917808219177}
+            id="nodeBar90"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={271.54289868025126}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar90-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={271.54289868025126}
+              >
+                 No further action  required
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={271.54289868025126}
+            >
+              62
+            </text>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`Sankey chart rendering Should re-render the Sankey chart with data 1`] = `
+<div>
+  <div
+    aria-label="Graph has no data to display"
+    id="_SankeyChart_empty2"
+    role="alert"
+    style="opacity: 0;"
+  />
+</div>
+`;
+
+exports[`Sankey chart rendering Should re-render the Sankey chart with data 2`] = `
+<div>
+  <div
+    class=
+
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          display: flex;
+          flex-direction: column;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: 100%;
+          overflow: hidden;
+          width: 100%;
+        }
+    role="presentation"
+    style=""
+  >
+    <div
+      class=
+          ms-FocusZone
+          &:focus {
+            outline: none;
+          }
+      data-focuszone-id="FocusZone16"
+    >
+      <svg
+        focusable="false"
+        height="436"
+        id="sankeyChart15"
+        width="864"
+      >
+        <g
+          class=
+
+              {
+                fill: #ffffff;
+                stroke-width: 3px;
+                stroke: #000000;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+                fill: #000000;
+              }
+          stroke-opacity="1"
+        >
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-0"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#8764B8"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#0E7878"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link from192.168.42.72toinboxwith weight80"
+              d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link3"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="0"
+            />
+          </g>
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-1"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#8764B8"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#0E7878"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link from172.152.48.13toinboxwith weight50"
+              d="M172,173.315C282.75,173.315,282.75,167.002,393.5,167.002L393.5,247.823C282.75,247.823,282.75,254.137,172,254.137Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link4"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-2"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#8764B8"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#0E7878"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link from172.152.48.13toJunk Folderwith weight28"
+              d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link5"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-3"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#8764B8"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#0E7878"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link from124.360.55.1toJunk Folderwith weight14"
+              d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link6"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-4"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#8764B8"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#0E7878"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link from192.564.10.2toJunk Folderwith weight7"
+              d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link7"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-5"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#8764B8"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#0E7878"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link from192.564.10.2toDeleted Folderwith weight20"
+              d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link8"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-6"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#8764B8"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#0E7878"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link from124.124.50.1toJunk Folderwith weight10"
+              d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link9"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-7"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#8764B8"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#0E7878"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link from172.630.89.4toJunk Folderwith weight10"
+              d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link10"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-8"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#0E7878"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#4F6BED"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link frominboxtoClickedwith weight30"
+              d="M517.5,37.686C628.25,37.686,628.25,36,739,36L739,84.493C628.25,84.493,628.25,86.18,517.5,86.18Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link11"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-9"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#0E7878"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#4F6BED"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link frominboxtoOpenedwith weight55"
+              d="M517.5,86.18C628.25,86.18,628.25,92.493,739,92.493L739,181.397C628.25,181.397,628.25,175.084,517.5,175.084Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link12"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-10"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#0E7878"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#4F6BED"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link fromJunk Folderto No further action  requiredwith weight60"
+              d="M517.5,270.853C628.25,270.853,628.25,271.543,739,271.543L739,368.529C628.25,368.529,628.25,367.84,517.5,367.84Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link13"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <defs>
+              <lineargradient
+                id="gradient-link1-11"
+                x1="0%"
+                x2="100%"
+                y1="0%"
+                y2="0%"
+              >
+                <stop
+                  offset="0"
+                  stop-color="#0E7878"
+                />
+                <stop
+                  offset="100%"
+                  stop-color="#4F6BED"
+                />
+              </lineargradient>
+            </defs>
+            <path
+              aria-label="link fromDeleted Folderto No further action  requiredwith weight2"
+              d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
+              data-is-focusable="true"
+              fill-opacity="1"
+              id="link14"
+              role="img"
+              stroke="#757575"
+              stroke-opacity="1"
+              stroke-width="2"
+              tabindex="-1"
+            />
+          </g>
+        </g>
+        <g
+          class=
+
+              {
+                fill: #F5F5F5;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+                fill: #000000;
+              }
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SankeyChart - Min Height of Node Test renders Sankey correctly on providing height less than onepercent of total height 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone87"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={436}
+      id="sankeyChart86"
+      width={864}
+    >
+      <g
+        className=
+
+            {
+              fill: #ffffff;
+              stroke-width: 3px;
+              stroke: #000000;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+        strokeOpacity={1}
+      >
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-0"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0078D4"
+              />
+              <stop
+                offset="100%"
+                stopColor="#E3008C"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromnode0tonode6with weight5"
+            d="M172,36C455.5,36,455.5,47.952,739,47.952L739,51.422C455.5,51.422,455.5,39.471,172,39.471Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link80"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-1"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0078D4"
+              />
+              <stop
+                offset="100%"
+                stopColor="#E3008C"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromnode1tonode6with weight5"
+            d="M172,47.471C455.5,47.471,455.5,51.422,739,51.422L739,54.893C455.5,54.893,455.5,50.941,172,50.941Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link81"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-2"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0078D4"
+              />
+              <stop
+                offset="100%"
+                stopColor="#E3008C"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromnode2tonode6with weight5"
+            d="M172,58.941C455.5,58.941,455.5,54.893,739,54.893L739,58.363C455.5,58.363,455.5,62.412,172,62.412Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link82"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-3"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0078D4"
+              />
+              <stop
+                offset="100%"
+                stopColor="#E3008C"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromnode3tonode6with weight5"
+            d="M172,70.412C455.5,70.412,455.5,58.363,739,58.363L739,61.834C455.5,61.834,455.5,73.882,172,73.882Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link83"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-4"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0078D4"
+              />
+              <stop
+                offset="100%"
+                stopColor="#E3008C"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromnode4tonode7with weight900"
+            d="M172,81.882C455.5,81.882,455.5,82.445,739,82.445L739,394.798C455.5,394.798,455.5,394.235,172,394.235Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link84"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g>
+          <defs>
+            <linearGradient
+              id="gradient-link54-5"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0078D4"
+              />
+              <stop
+                offset="100%"
+                stopColor="#E3008C"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromnode5tonode7with weight80"
+            d="M172,402.235C455.5,402.235,455.5,394.798,739,394.798L739,422.562C455.5,422.562,455.5,430,172,430Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link85"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+      </g>
+      <g
+        className=
+
+            {
+              fill: #F5F5F5;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+      >
+        <g
+          id="nodeGElement58"
+        >
+          <rect
+            aria-label="nodenode0with weight5"
+            data-is-focusable={true}
+            fill="#0078D4"
+            height={3.470588235294116}
+            id="nodeBar57"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#757575"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={36}
+          />
+        </g>
+        <g
+          id="nodeGElement61"
+        >
+          <rect
+            aria-label="nodenode1with weight5"
+            data-is-focusable={true}
+            fill="#0078D4"
+            height={3.470588235294116}
+            id="nodeBar60"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#757575"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={47.470588235294116}
+          />
+        </g>
+        <g
+          id="nodeGElement64"
+        >
+          <rect
+            aria-label="nodenode2with weight5"
+            data-is-focusable={true}
+            fill="#0078D4"
+            height={3.470588235294116}
+            id="nodeBar63"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#757575"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={58.94117647058823}
+          />
+        </g>
+        <g
+          id="nodeGElement67"
+        >
+          <rect
+            aria-label="nodenode3with weight5"
+            data-is-focusable={true}
+            fill="#0078D4"
+            height={3.470588235294116}
+            id="nodeBar66"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#757575"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={70.41176470588235}
+          />
+        </g>
+        <g
+          id="nodeGElement70"
+        >
+          <rect
+            aria-label="nodenode4with weight900"
+            data-is-focusable={true}
+            fill="#0078D4"
+            height={312.3529411764705}
+            id="nodeBar69"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#757575"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={81.88235294117646}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar69-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={81.88235294117646}
+              >
+                node4
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={81.88235294117646}
+            >
+              900
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement73"
+        >
+          <rect
+            aria-label="nodenode5with weight80"
+            data-is-focusable={true}
+            fill="#0078D4"
+            height={27.764705882352928}
+            id="nodeBar72"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#757575"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={402.23529411764696}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar72-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={402.23529411764696}
+              >
+                node5
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0em"
+              dy="1em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={164}
+              y={402.23529411764696}
+            >
+              80
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement76"
+        >
+          <rect
+            aria-label="nodenode6with weight20"
+            data-is-focusable={true}
+            fill="#E3008C"
+            height={13.882352941176471}
+            id="nodeBar75"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#757575"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={47.951536403029024}
+          />
+        </g>
+        <g
+          id="nodeGElement79"
+        >
+          <rect
+            aria-label="nodenode7with weight980"
+            data-is-focusable={true}
+            fill="#E3008C"
+            height={340.1176470588236}
+            id="nodeBar78"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#757575"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={82.44476169854653}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar78-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={82.44476169854653}
+              >
+                node7
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={82.44476169854653}
+            >
+              980
+            </text>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`SankeyChart - mouse events Should render callout correctly on mouseover when height of node is less than 24px 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone52"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={436}
+      id="sankeyChart101"
+      width={864}
+    >
+      <g
+        className=
+
+            {
+              fill: #ffffff;
+              stroke-width: 3px;
+              stroke: #000000;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+        strokeOpacity={1}
+      >
+        <g
+          key="link1-0"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-0"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.168.42.72toinboxwith weight80"
+            d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link89"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-1"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-1"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toinboxwith weight50"
+            d="M172,173.315C282.75,173.315,282.75,167.002,393.5,167.002L393.5,247.823C282.75,247.823,282.75,254.137,172,254.137Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link90"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-2"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-2"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toJunk Folderwith weight28"
+            d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link91"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-3"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-3"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.360.55.1toJunk Folderwith weight14"
+            d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
+            data-is-focusable={true}
+            fill="#8764B8"
+            fillOpacity={1}
+            id="link92"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#4B3867"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-4"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-4"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toJunk Folderwith weight7"
+            d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link93"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-5"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-5"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toDeleted Folderwith weight20"
+            d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link94"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-6"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-6"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.124.50.1toJunk Folderwith weight10"
+            d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link95"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-7"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-7"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.630.89.4toJunk Folderwith weight10"
+            d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link96"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-8"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-8"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoClickedwith weight30"
+            d="M517.5,37.686C628.25,37.686,628.25,36,739,36L739,84.493C628.25,84.493,628.25,86.18,517.5,86.18Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link97"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-9"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-9"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoOpenedwith weight55"
+            d="M517.5,86.18C628.25,86.18,628.25,92.493,739,92.493L739,181.397C628.25,181.397,628.25,175.084,517.5,175.084Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link98"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-10"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-10"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromJunk Folderto No further action  requiredwith weight60"
+            d="M517.5,270.853C628.25,270.853,628.25,271.543,739,271.543L739,368.529C628.25,368.529,628.25,367.84,517.5,367.84Z"
+            data-is-focusable={true}
+            fill="#8764B8"
+            fillOpacity={1}
+            id="link99"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#4B3867"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-11"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-11"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromDeleted Folderto No further action  requiredwith weight2"
+            d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link100"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+      </g>
+      <g
+        className=
+
+            {
+              fill: #F5F5F5;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+      >
+        <g
+          id="nodeGElement55"
+          key="0"
+        >
+          <rect
+            aria-label="node192.168.42.72with weight80"
+            data-is-focusable={true}
+            height={129.31506849315068}
+            id="nodeBar54"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#323130"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar54-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={36}
+              >
+                192.168.42.72
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#323130"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={36}
+            >
+              80
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement58"
+          key="1"
+        >
+          <rect
+            aria-label="node172.152.48.13with weight78"
+            data-is-focusable={true}
+            height={126.08219178082172}
+            id="nodeBar57"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={173.31506849315068}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#323130"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar57-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={173.31506849315068}
+              >
+                172.152.48.13
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#323130"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={173.31506849315068}
+            >
+              78
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement61"
+          key="2"
+        >
+          <rect
+            aria-label="node124.360.55.1with weight14"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={22.630136986301352}
+            id="nodeBar60"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={307.3972602739724}
+          />
+        </g>
+        <g
+          id="nodeGElement64"
+          key="3"
+        >
+          <rect
+            aria-label="node192.564.10.2with weight27"
+            data-is-focusable={true}
+            height={43.643835616438366}
+            id="nodeBar63"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={362.1917808219178}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#323130"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar63-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={362.1917808219178}
+              >
+                192.564.10.2
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#323130"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={362.1917808219178}
+            >
+              27
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement67"
+          key="4"
+        >
+          <rect
+            aria-label="node124.124.50.1with weight10"
+            data-is-focusable={true}
+            height={16.16438356164383}
+            id="nodeBar66"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={338.02739726027374}
+          />
+        </g>
+        <g
+          id="nodeGElement70"
+          key="5"
+        >
+          <rect
+            aria-label="node172.630.89.4with weight10"
+            data-is-focusable={true}
+            height={16.16438356164383}
+            id="nodeBar69"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={413.83561643835617}
+          />
+        </g>
+        <g
+          id="nodeGElement73"
+          key="6"
+        >
+          <rect
+            aria-label="nodeinboxwith weight130"
+            data-is-focusable={true}
+            height={210.13698630136994}
+            id="nodeBar72"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={37.68645072950067}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#323130"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar72-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={37.68645072950067}
+              >
+                inbox
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#323130"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={37.68645072950067}
+            >
+              130
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement76"
+          key="7"
+        >
+          <rect
+            aria-label="nodeJunk Folderwith weight69"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={111.53424657534248}
+            id="nodeBar75"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={270.8534770168133}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar75-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={270.8534770168133}
+              >
+                Junk Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={270.8534770168133}
+            >
+              69
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement79"
+          key="8"
+        >
+          <rect
+            aria-label="nodeDeleted Folderwith weight20"
+            data-is-focusable={true}
+            height={32.32876712328766}
+            id="nodeBar78"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={390.3877235921558}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#323130"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar78-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={390.3877235921558}
+              >
+                Deleted Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0em"
+              dy="1em"
+              fill="#323130"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={509.5}
+              y={390.3877235921558}
+            >
+              20
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement82"
+          key="9"
+        >
+          <rect
+            aria-label="nodeClickedwith weight30"
+            data-is-focusable={true}
+            height={48.49315068493148}
+            id="nodeBar81"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#323130"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar81-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={36}
+              >
+                Clicked
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#323130"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={36}
+            >
+              30
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement85"
+          key="10"
+        >
+          <rect
+            aria-label="nodeOpenedwith weight55"
+            data-is-focusable={true}
+            height={88.90410958904114}
+            id="nodeBar84"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={92.49315068493148}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#323130"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar84-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={92.49315068493148}
+              >
+                Opened
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#323130"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={92.49315068493148}
+            >
+              55
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement88"
+          key="11"
+        >
+          <rect
+            aria-label="node No further action  requiredwith weight62"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={100.21917808219177}
+            id="nodeBar87"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={271.54289868025126}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar87-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={271.54289868025126}
+              >
+                 No further action  required
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={271.54289868025126}
+            >
+              62
+            </text>
+          </g>
+        </g>
+      </g>
+      <span
+        className="ms-layer"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`SankeyChart - mouse events Should render correctly on link mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone52"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={436}
+      id="sankeyChart101"
+      width={864}
+    >
+      <g
+        className=
+
+            {
+              fill: #ffffff;
+              stroke-width: 3px;
+              stroke: #000000;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+        strokeOpacity={1}
+      >
+        <g
+          key="link1-0"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-0"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.168.42.72toinboxwith weight80"
+            d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link89"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={0.5}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-1"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-1"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toinboxwith weight50"
+            d="M172,173.315C282.75,173.315,282.75,167.002,393.5,167.002L393.5,247.823C282.75,247.823,282.75,254.137,172,254.137Z"
+            data-is-focusable={true}
+            fill="url(#gradient-link1-1)"
+            fillOpacity={0.3}
+            id="link90"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="url(#gradient-link1-1)"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-2"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-2"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toJunk Folderwith weight28"
+            d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link91"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={0.5}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-3"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-3"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.360.55.1toJunk Folderwith weight14"
+            d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link92"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={0.5}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-4"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-4"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toJunk Folderwith weight7"
+            d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link93"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={0.5}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-5"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-5"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toDeleted Folderwith weight20"
+            d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link94"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={0.5}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-6"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-6"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.124.50.1toJunk Folderwith weight10"
+            d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link95"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={0.5}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-7"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-7"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.630.89.4toJunk Folderwith weight10"
+            d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link96"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={0.5}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-8"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-8"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoClickedwith weight30"
+            d="M517.5,37.686C628.25,37.686,628.25,36,739,36L739,84.493C628.25,84.493,628.25,86.18,517.5,86.18Z"
+            data-is-focusable={true}
+            fill="url(#gradient-link1-8)"
+            fillOpacity={0.3}
+            id="link97"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="url(#gradient-link1-8)"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-9"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-9"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoOpenedwith weight55"
+            d="M517.5,86.18C628.25,86.18,628.25,92.493,739,92.493L739,181.397C628.25,181.397,628.25,175.084,517.5,175.084Z"
+            data-is-focusable={true}
+            fill="url(#gradient-link1-9)"
+            fillOpacity={0.3}
+            id="link98"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="url(#gradient-link1-9)"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-10"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-10"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromJunk Folderto No further action  requiredwith weight60"
+            d="M517.5,270.853C628.25,270.853,628.25,271.543,739,271.543L739,368.529C628.25,368.529,628.25,367.84,517.5,367.84Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link99"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={0.5}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-11"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-11"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromDeleted Folderto No further action  requiredwith weight2"
+            d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link100"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={0.5}
+            strokeWidth="2"
+          />
+        </g>
+      </g>
+      <g
+        className=
+
+            {
+              fill: #F5F5F5;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+      >
+        <g
+          id="nodeGElement55"
+          key="0"
+        >
+          <rect
+            aria-label="node192.168.42.72with weight80"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={129.31506849315068}
+            id="nodeBar54"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar54-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={36}
+              >
+                192.168.42.72
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={36}
+            >
+              80
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement58"
+          key="1"
+        >
+          <rect
+            aria-label="node172.152.48.13with weight78"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={126.08219178082172}
+            id="nodeBar57"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={173.31506849315068}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar57-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={173.31506849315068}
+              >
+                172.152.48.13
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={173.31506849315068}
+            >
+              78
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement61"
+          key="2"
+        >
+          <rect
+            aria-label="node124.360.55.1with weight14"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={22.630136986301352}
+            id="nodeBar60"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={307.3972602739724}
+          />
+        </g>
+        <g
+          id="nodeGElement64"
+          key="3"
+        >
+          <rect
+            aria-label="node192.564.10.2with weight27"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={43.643835616438366}
+            id="nodeBar63"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={362.1917808219178}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar63-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={362.1917808219178}
+              >
+                192.564.10.2
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={362.1917808219178}
+            >
+              27
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement67"
+          key="4"
+        >
+          <rect
+            aria-label="node124.124.50.1with weight10"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={16.16438356164383}
+            id="nodeBar66"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={338.02739726027374}
+          />
+        </g>
+        <g
+          id="nodeGElement70"
+          key="5"
+        >
+          <rect
+            aria-label="node172.630.89.4with weight10"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={16.16438356164383}
+            id="nodeBar69"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={413.83561643835617}
+          />
+        </g>
+        <g
+          id="nodeGElement73"
+          key="6"
+        >
+          <rect
+            aria-label="nodeinboxwith weight130"
+            data-is-focusable={true}
+            fill="#0E7878"
+            height={210.13698630136994}
+            id="nodeBar72"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={37.68645072950067}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar72-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={37.68645072950067}
+              >
+                inbox
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={37.68645072950067}
+            >
+              130
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement76"
+          key="7"
+        >
+          <rect
+            aria-label="nodeJunk Folderwith weight69"
+            data-is-focusable={true}
+            fill="#0E7878"
+            height={111.53424657534248}
+            id="nodeBar75"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={270.8534770168133}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar75-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={270.8534770168133}
+              >
+                Junk Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={270.8534770168133}
+            >
+              69
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement79"
+          key="8"
+        >
+          <rect
+            aria-label="nodeDeleted Folderwith weight20"
+            data-is-focusable={true}
+            fill="#0E7878"
+            height={32.32876712328766}
+            id="nodeBar78"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={390.3877235921558}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar78-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={390.3877235921558}
+              >
+                Deleted Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0em"
+              dy="1em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={509.5}
+              y={390.3877235921558}
+            >
+              20
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement82"
+          key="9"
+        >
+          <rect
+            aria-label="nodeClickedwith weight30"
+            data-is-focusable={true}
+            fill="#4F6BED"
+            height={48.49315068493148}
+            id="nodeBar81"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar81-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={36}
+              >
+                Clicked
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={36}
+            >
+              30
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement85"
+          key="10"
+        >
+          <rect
+            aria-label="nodeOpenedwith weight55"
+            data-is-focusable={true}
+            fill="#4F6BED"
+            height={88.90410958904114}
+            id="nodeBar84"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={92.49315068493148}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar84-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={92.49315068493148}
+              >
+                Opened
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={92.49315068493148}
+            >
+              55
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement88"
+          key="11"
+        >
+          <rect
+            aria-label="node No further action  requiredwith weight62"
+            data-is-focusable={true}
+            fill="#4F6BED"
+            height={100.21917808219177}
+            id="nodeBar87"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={271.54289868025126}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar87-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={271.54289868025126}
+              >
+                 No further action  required
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={271.54289868025126}
+            >
+              62
+            </text>
+          </g>
+        </g>
+      </g>
+      <span
+        className="ms-layer"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`SankeyChart - mouse events Should render correctly on node mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone52"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={436}
+      id="sankeyChart101"
+      width={864}
+    >
+      <g
+        className=
+
+            {
+              fill: #ffffff;
+              stroke-width: 3px;
+              stroke: #000000;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+        strokeOpacity={1}
+      >
+        <g
+          key="link1-0"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-0"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.168.42.72toinboxwith weight80"
+            d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link89"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-1"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-1"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toinboxwith weight50"
+            d="M172,173.315C282.75,173.315,282.75,167.002,393.5,167.002L393.5,247.823C282.75,247.823,282.75,254.137,172,254.137Z"
+            data-is-focusable={true}
+            fill="#8764B8"
+            fillOpacity={1}
+            id="link90"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#4B3867"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-2"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-2"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toJunk Folderwith weight28"
+            d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
+            data-is-focusable={true}
+            fill="#8764B8"
+            fillOpacity={1}
+            id="link91"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#4B3867"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-3"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-3"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.360.55.1toJunk Folderwith weight14"
+            d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link92"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-4"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-4"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toJunk Folderwith weight7"
+            d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link93"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-5"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-5"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toDeleted Folderwith weight20"
+            d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link94"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-6"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-6"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.124.50.1toJunk Folderwith weight10"
+            d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link95"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-7"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-7"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.630.89.4toJunk Folderwith weight10"
+            d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link96"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-8"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-8"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoClickedwith weight30"
+            d="M517.5,37.686C628.25,37.686,628.25,36,739,36L739,84.493C628.25,84.493,628.25,86.18,517.5,86.18Z"
+            data-is-focusable={true}
+            fill="#8764B8"
+            fillOpacity={1}
+            id="link97"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#4B3867"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-9"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-9"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoOpenedwith weight55"
+            d="M517.5,86.18C628.25,86.18,628.25,92.493,739,92.493L739,181.397C628.25,181.397,628.25,175.084,517.5,175.084Z"
+            data-is-focusable={true}
+            fill="#8764B8"
+            fillOpacity={1}
+            id="link98"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#4B3867"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-10"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-10"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromJunk Folderto No further action  requiredwith weight60"
+            d="M517.5,270.853C628.25,270.853,628.25,271.543,739,271.543L739,368.529C628.25,368.529,628.25,367.84,517.5,367.84Z"
+            data-is-focusable={true}
+            fill="#8764B8"
+            fillOpacity={1}
+            id="link99"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#4B3867"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-11"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-11"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromDeleted Folderto No further action  requiredwith weight2"
+            d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link100"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+      </g>
+      <g
+        className=
+
+            {
+              fill: #F5F5F5;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+      >
+        <g
+          id="nodeGElement55"
+          key="0"
+        >
+          <rect
+            aria-label="node192.168.42.72with weight80"
+            data-is-focusable={true}
+            height={129.31506849315068}
+            id="nodeBar54"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#323130"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar54-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={36}
+              >
+                192.168.42.72
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#323130"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={36}
+            >
+              80
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement58"
+          key="1"
+        >
+          <rect
+            aria-label="node172.152.48.13with weight78"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={126.08219178082172}
+            id="nodeBar57"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={173.31506849315068}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar57-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={173.31506849315068}
+              >
+                172.152.48.13
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={173.31506849315068}
+            >
+              78
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement61"
+          key="2"
+        >
+          <rect
+            aria-label="node124.360.55.1with weight14"
+            data-is-focusable={true}
+            height={22.630136986301352}
+            id="nodeBar60"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={307.3972602739724}
+          />
+        </g>
+        <g
+          id="nodeGElement64"
+          key="3"
+        >
+          <rect
+            aria-label="node192.564.10.2with weight27"
+            data-is-focusable={true}
+            height={43.643835616438366}
+            id="nodeBar63"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={362.1917808219178}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#323130"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar63-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={362.1917808219178}
+              >
+                192.564.10.2
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#323130"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={362.1917808219178}
+            >
+              27
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement67"
+          key="4"
+        >
+          <rect
+            aria-label="node124.124.50.1with weight10"
+            data-is-focusable={true}
+            height={16.16438356164383}
+            id="nodeBar66"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={338.02739726027374}
+          />
+        </g>
+        <g
+          id="nodeGElement70"
+          key="5"
+        >
+          <rect
+            aria-label="node172.630.89.4with weight10"
+            data-is-focusable={true}
+            height={16.16438356164383}
+            id="nodeBar69"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={413.83561643835617}
+          />
+        </g>
+        <g
+          id="nodeGElement73"
+          key="6"
+        >
+          <rect
+            aria-label="nodeinboxwith weight130"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={210.13698630136994}
+            id="nodeBar72"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={37.68645072950067}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar72-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={37.68645072950067}
+              >
+                inbox
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={37.68645072950067}
+            >
+              130
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement76"
+          key="7"
+        >
+          <rect
+            aria-label="nodeJunk Folderwith weight69"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={111.53424657534248}
+            id="nodeBar75"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={270.8534770168133}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar75-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={270.8534770168133}
+              >
+                Junk Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={270.8534770168133}
+            >
+              69
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement79"
+          key="8"
+        >
+          <rect
+            aria-label="nodeDeleted Folderwith weight20"
+            data-is-focusable={true}
+            height={32.32876712328766}
+            id="nodeBar78"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={390.3877235921558}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#323130"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar78-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={390.3877235921558}
+              >
+                Deleted Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0em"
+              dy="1em"
+              fill="#323130"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={509.5}
+              y={390.3877235921558}
+            >
+              20
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement82"
+          key="9"
+        >
+          <rect
+            aria-label="nodeClickedwith weight30"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={48.49315068493148}
+            id="nodeBar81"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar81-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={36}
+              >
+                Clicked
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={36}
+            >
+              30
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement85"
+          key="10"
+        >
+          <rect
+            aria-label="nodeOpenedwith weight55"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={88.90410958904114}
+            id="nodeBar84"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={92.49315068493148}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar84-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={92.49315068493148}
+              >
+                Opened
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={92.49315068493148}
+            >
+              55
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement88"
+          key="11"
+        >
+          <rect
+            aria-label="node No further action  requiredwith weight62"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={100.21917808219177}
+            id="nodeBar87"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={271.54289868025126}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar87-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={271.54289868025126}
+              >
+                 No further action  required
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={271.54289868025126}
+            >
+              62
+            </text>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`SankeyChart - mouse events Should render tooltip correctly on mouseover when node description is large 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+    data-focuszone-id="FocusZone52"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={436}
+      id="sankeyChart51"
+      width={864}
+    >
+      <g
+        className=
+
+            {
+              fill: #ffffff;
+              stroke-width: 3px;
+              stroke: #000000;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+        strokeOpacity={1}
+      >
+        <g
+          key="link1-0"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-0"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.168.42.72toinboxwith weight80"
+            d="M172,36C282.75,36,282.75,37.686,393.5,37.686L393.5,167.002C282.75,167.002,282.75,165.315,172,165.315Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link39"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-1"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-1"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toinboxwith weight50"
+            d="M172,173.315C282.75,173.315,282.75,167.002,393.5,167.002L393.5,247.823C282.75,247.823,282.75,254.137,172,254.137Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link40"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-2"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-2"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.152.48.13toJunk Folderwith weight28"
+            d="M172,254.137C282.75,254.137,282.75,270.853,393.5,270.853L393.5,316.114C282.75,316.114,282.75,299.397,172,299.397Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link41"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-3"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-3"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.360.55.1toJunk Folderwith weight14"
+            d="M172,307.397C282.75,307.397,282.75,316.114,393.5,316.114L393.5,338.744C282.75,338.744,282.75,330.027,172,330.027Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link42"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-4"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-4"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toJunk Folderwith weight7"
+            d="M172,362.192C282.75,362.192,282.75,354.908,393.5,354.908L393.5,366.223C282.75,366.223,282.75,373.507,172,373.507Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link43"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-5"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-5"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from192.564.10.2toDeleted Folderwith weight20"
+            d="M172,373.507C282.75,373.507,282.75,390.388,393.5,390.388L393.5,422.716C282.75,422.716,282.75,405.836,172,405.836Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link44"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-6"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-6"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from124.124.50.1toJunk Folderwith weight10"
+            d="M172,338.027C282.75,338.027,282.75,338.744,393.5,338.744L393.5,354.908C282.75,354.908,282.75,354.192,172,354.192Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link45"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-7"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-7"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#8764B8"
+              />
+              <stop
+                offset="100%"
+                stopColor="#0E7878"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link from172.630.89.4toJunk Folderwith weight10"
+            d="M172,413.836C282.75,413.836,282.75,366.223,393.5,366.223L393.5,382.388C282.75,382.388,282.75,430,172,430Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link46"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-8"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-8"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoClickedwith weight30"
+            d="M517.5,37.686C628.25,37.686,628.25,36,739,36L739,84.493C628.25,84.493,628.25,86.18,517.5,86.18Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link47"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-9"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-9"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link frominboxtoOpenedwith weight55"
+            d="M517.5,86.18C628.25,86.18,628.25,92.493,739,92.493L739,181.397C628.25,181.397,628.25,175.084,517.5,175.084Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link48"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-10"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-10"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromJunk Folderto No further action  requiredwith weight60"
+            d="M517.5,270.853C628.25,270.853,628.25,271.543,739,271.543L739,368.529C628.25,368.529,628.25,367.84,517.5,367.84Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link49"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+        <g
+          key="link1-11"
+        >
+          <defs>
+            <linearGradient
+              id="gradient-link1-11"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            >
+              <stop
+                offset="0"
+                stopColor="#0E7878"
+              />
+              <stop
+                offset="100%"
+                stopColor="#4F6BED"
+              />
+            </linearGradient>
+          </defs>
+          <path
+            aria-label="link fromDeleted Folderto No further action  requiredwith weight2"
+            d="M517.5,390.388C628.25,390.388,628.25,368.529,739,368.529L739,371.762C628.25,371.762,628.25,393.621,517.5,393.621Z"
+            data-is-focusable={true}
+            fillOpacity={1}
+            id="link50"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+            stroke="#757575"
+            strokeOpacity={1}
+            strokeWidth="2"
+          />
+        </g>
+      </g>
+      <g
+        className=
+
+            {
+              fill: #F5F5F5;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+              fill: #000000;
+            }
+      >
+        <g
+          id="nodeGElement5"
+          key="0"
+        >
+          <rect
+            aria-label="node192.168.42.72with weight80"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={129.31506849315068}
+            id="nodeBar4"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar4-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={36}
+              >
+                192.168.42.72
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={36}
+            >
+              80
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement8"
+          key="1"
+        >
+          <rect
+            aria-label="node172.152.48.13with weight78"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={126.08219178082172}
+            id="nodeBar7"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={173.31506849315068}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar7-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={173.31506849315068}
+              >
+                172.152.48.13
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={173.31506849315068}
+            >
+              78
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement11"
+          key="2"
+        >
+          <rect
+            aria-label="node124.360.55.1with weight14"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={22.630136986301352}
+            id="nodeBar10"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={307.3972602739724}
+          />
+        </g>
+        <g
+          id="nodeGElement14"
+          key="3"
+        >
+          <rect
+            aria-label="node192.564.10.2with weight27"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={43.643835616438366}
+            id="nodeBar13"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={362.1917808219178}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar13-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={48}
+                y={362.1917808219178}
+              >
+                192.564.10.2
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={48}
+              y={362.1917808219178}
+            >
+              27
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement17"
+          key="4"
+        >
+          <rect
+            aria-label="node124.124.50.1with weight10"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={16.16438356164383}
+            id="nodeBar16"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={338.02739726027374}
+          />
+        </g>
+        <g
+          id="nodeGElement20"
+          key="5"
+        >
+          <rect
+            aria-label="node172.630.89.4with weight10"
+            data-is-focusable={true}
+            fill="#8764B8"
+            height={16.16438356164383}
+            id="nodeBar19"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#4B3867"
+            strokeWidth="2"
+            width={124}
+            x={48}
+            y={413.83561643835617}
+          />
+        </g>
+        <g
+          id="nodeGElement23"
+          key="6"
+        >
+          <rect
+            aria-label="nodeinboxwith weight130"
+            data-is-focusable={true}
+            fill="#0E7878"
+            height={210.13698630136994}
+            id="nodeBar22"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={37.68645072950067}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar22-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={37.68645072950067}
+              >
+                inbox
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={37.68645072950067}
+            >
+              130
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement26"
+          key="7"
+        >
+          <rect
+            aria-label="nodeJunk Folderwith weight69"
+            data-is-focusable={true}
+            fill="#0E7878"
+            height={111.53424657534248}
+            id="nodeBar25"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={270.8534770168133}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar25-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={270.8534770168133}
+              >
+                Junk Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={393.5}
+              y={270.8534770168133}
+            >
+              69
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement29"
+          key="8"
+        >
+          <rect
+            aria-label="nodeDeleted Folderwith weight20"
+            data-is-focusable={true}
+            fill="#0E7878"
+            height={32.32876712328766}
+            id="nodeBar28"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#004E4E"
+            strokeWidth="2"
+            width={124}
+            x={393.5}
+            y={390.3877235921558}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar28-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={393.5}
+                y={390.3877235921558}
+              >
+                Deleted Folder
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0em"
+              dy="1em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={509.5}
+              y={390.3877235921558}
+            >
+              20
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement32"
+          key="9"
+        >
+          <rect
+            aria-label="nodeClickedwith weight30"
+            data-is-focusable={true}
+            fill="#4F6BED"
+            height={48.49315068493148}
+            id="nodeBar31"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={36}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar31-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={36}
+              >
+                Clicked
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={36}
+            >
+              30
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement35"
+          key="10"
+        >
+          <rect
+            aria-label="nodeOpenedwith weight55"
+            data-is-focusable={true}
+            fill="#4F6BED"
+            height={88.90410958904114}
+            id="nodeBar34"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={92.49315068493148}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar34-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={92.49315068493148}
+              >
+                Opened
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={92.49315068493148}
+            >
+              55
+            </text>
+          </g>
+        </g>
+        <g
+          id="nodeGElement38"
+          key="11"
+        >
+          <rect
+            aria-label="node No further action  requiredwith weight62"
+            data-is-focusable={true}
+            fill="#4F6BED"
+            height={100.21917808219177}
+            id="nodeBar37"
+            onFocus={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+            opacity="1"
+            role="img"
+            stroke="#3B52B4"
+            strokeWidth="2"
+            width={124}
+            x={739}
+            y={271.54289868025126}
+          />
+          <g
+            className=
+
+                {
+                  margin-bottom: 4px;
+                  margin-left: 8px;
+                  margin-right: 8px;
+                  margin-top: 4px;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                  fill: rgb(179, 179, 179);
+                }
+          >
+            <g
+              className="nodeName"
+            >
+              <text
+                aria-hidden="true"
+                dx="0.4em"
+                dy="1.2em"
+                fill="#FFFFFF"
+                fontSize={10}
+                fontWeight="regular"
+                id="nodeBar37-name"
+                onMouseOut={[Function]}
+                onMouseOver={[Function]}
+                textAnchor="start"
+                x={739}
+                y={271.54289868025126}
+              >
+                 No further action  required
+              </text>
+            </g>
+            <text
+              aria-hidden="true"
+              dx="0.4em"
+              dy="2em"
+              fill="#FFFFFF"
+              fontSize={14}
+              fontWeight="bold"
+              textAnchor="start"
+              x={739}
+              y={271.54289868025126}
+            >
+              62
+            </text>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </div>
+</div>
+`;
diff --git a/packages/react-charting/src/components/Sparkline/Sparkline.base.tsx b/packages/react-charting/src/components/Sparkline/Sparkline.base.tsx
index 62a20b9cdbfec..1c822c192ea9b 100644
--- a/packages/react-charting/src/components/Sparkline/Sparkline.base.tsx
+++ b/packages/react-charting/src/components/Sparkline/Sparkline.base.tsx
@@ -14,7 +14,6 @@ export interface ISparklineState {
   _width: number;
   _height: number;
   _valueTextWidth: number;
-  _emptyChart?: boolean;
 }
 
 export class SparklineBase extends React.Component<ISparklineProps, ISparklineState> {
@@ -32,6 +31,7 @@ export class SparklineBase extends React.Component<ISparklineProps, ISparklineSt
   private y: any;
   private area: any;
   private line: any;
+  private _emptyChartId: string;
 
   constructor(props: ISparklineProps) {
     super(props);
@@ -40,20 +40,12 @@ export class SparklineBase extends React.Component<ISparklineProps, ISparklineSt
       _width: this.props.width! || 80,
       _height: this.props.height! || 20,
       _valueTextWidth: this.props.valueTextWidth! || 80,
-      _emptyChart: false,
     };
+    this._emptyChartId = getId('_SparklineChart_empty');
   }
 
   public componentDidMount() {
-    const isChartEmpty: boolean = !(
-      this.props.data &&
-      this.props.data.lineChartData &&
-      this.props.data.lineChartData.length > 0 &&
-      this.props.data.lineChartData.filter(item => item.data.length === 0).length === 0
-    );
-    if (this.state._emptyChart !== isChartEmpty) {
-      this.setState({ _emptyChart: isChartEmpty });
-    } else {
+    if (!this._isChartEmpty()) {
       const area = d3Area()
         /* eslint-disable @typescript-eslint/no-explicit-any */
         .x((d: any) => this.x(d.x))
@@ -117,7 +109,7 @@ export class SparklineBase extends React.Component<ISparklineProps, ISparklineSt
     const classNames = getClassNames(this.props.styles!, {
       theme: this.props.theme!,
     });
-    return !this.state._emptyChart ? (
+    return !this._isChartEmpty() ? (
       <FocusZone
         direction={FocusZoneDirection.horizontal}
         isCircularNavigation={true}
@@ -144,11 +136,20 @@ export class SparklineBase extends React.Component<ISparklineProps, ISparklineSt
       </FocusZone>
     ) : (
       <div
-        id={getId('_SparklineChart_')}
+        id={this._emptyChartId}
         role={'alert'}
         style={{ opacity: '0' }}
         aria-label={'Graph has no data to display'}
       />
     );
   }
+
+  private _isChartEmpty(): boolean {
+    return !(
+      this.props.data &&
+      this.props.data.lineChartData &&
+      this.props.data.lineChartData.length > 0 &&
+      this.props.data.lineChartData.filter(item => item.data.length === 0).length === 0
+    );
+  }
 }
diff --git a/packages/react-charting/src/components/Sparkline/Sparkline.test.tsx b/packages/react-charting/src/components/Sparkline/Sparkline.test.tsx
index 82aa9df15c500..9f9ab1e350a0e 100644
--- a/packages/react-charting/src/components/Sparkline/Sparkline.test.tsx
+++ b/packages/react-charting/src/components/Sparkline/Sparkline.test.tsx
@@ -9,7 +9,7 @@ import { ISparklineState, SparklineBase } from './Sparkline.base';
 // Wrapper of the SparklineChart to be tested.
 let wrapper: ReactWrapper<ISparklineProps, ISparklineState, SparklineBase> | undefined;
 
-const sparkline1Points: IChartProps = {
+export const sparkline1Points: IChartProps = {
   chartTitle: '10.21',
   lineChartData: [
     {
@@ -89,7 +89,7 @@ const sparkline2Points: IChartProps = {
   ],
 };
 
-const emptySparklinePoints: IChartProps = {
+export const emptySparklinePoints: IChartProps = {
   chartTitle: 'Empty sparkline chart',
   lineChartData: [
     {
diff --git a/packages/react-charting/src/components/Sparkline/SparklineRTL.test.tsx b/packages/react-charting/src/components/Sparkline/SparklineRTL.test.tsx
new file mode 100644
index 0000000000000..264467b29faae
--- /dev/null
+++ b/packages/react-charting/src/components/Sparkline/SparklineRTL.test.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { queryAllByAttribute, render, waitFor } from '@testing-library/react';
+import { emptySparklinePoints, sparkline1Points } from './Sparkline.test';
+import { Sparkline } from './index';
+
+describe('Sparkline chart rendering', () => {
+  test('Should re-render the Sparkline chart with data', async () => {
+    // Arrange
+    const { container, rerender } = render(<Sparkline data={emptySparklinePoints} />);
+    const getById = queryAllByAttribute.bind(null, 'id');
+    // Assert
+    expect(container).toMatchSnapshot();
+    expect(getById(container, /_SparklineChart_empty/i)).toHaveLength(1);
+    // Act
+    rerender(<Sparkline data={sparkline1Points} />);
+    await waitFor(() => {
+      // Assert
+      expect(container).toMatchSnapshot();
+      expect(getById(container, /_SparklineChart_empty/i)).toHaveLength(0);
+    });
+  });
+});
diff --git a/packages/react-charting/src/components/Sparkline/__snapshots__/Sparkline.test.tsx.snap b/packages/react-charting/src/components/Sparkline/__snapshots__/Sparkline.test.tsx.snap
index b8d2e6dd002de..08c880c9b4139 100644
--- a/packages/react-charting/src/components/Sparkline/__snapshots__/Sparkline.test.tsx.snap
+++ b/packages/react-charting/src/components/Sparkline/__snapshots__/Sparkline.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`Sparkline snapShot testing renders Sparkline correctly 1`] = `
       {
         display: inline;
       }
-  data-focuszone-id="FocusZone0"
+  data-focuszone-id="FocusZone1"
   onFocus={[Function]}
   onKeyDown={[Function]}
   onMouseDownCapture={[Function]}
@@ -82,7 +82,7 @@ exports[`Sparkline snapShot testing renders Sparkline correctly with no legend 1
       {
         display: inline;
       }
-  data-focuszone-id="FocusZone1"
+  data-focuszone-id="FocusZone3"
   onFocus={[Function]}
   onKeyDown={[Function]}
   onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/Sparkline/__snapshots__/SparklineRTL.test.tsx.snap b/packages/react-charting/src/components/Sparkline/__snapshots__/SparklineRTL.test.tsx.snap
new file mode 100644
index 0000000000000..4665434cf887c
--- /dev/null
+++ b/packages/react-charting/src/components/Sparkline/__snapshots__/SparklineRTL.test.tsx.snap
@@ -0,0 +1,163 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Sparkline chart rendering Should re-render the Sparkline chart with data 1`] = `
+<div>
+  <div
+    aria-label="Graph has no data to display"
+    id="_SparklineChart_empty7"
+    role="alert"
+    style="opacity: 0;"
+  />
+</div>
+`;
+
+exports[`Sparkline chart rendering Should re-render the Sparkline chart with data 2`] = `
+<div>
+  <div
+    class=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          display: inline;
+        }
+    data-focuszone-id="FocusZone8"
+  >
+    <div
+      class=
+
+          {
+            display: inline;
+          }
+    >
+      <svg
+        data-is-focusable="true"
+        height="20"
+        tabindex="0"
+        width="80"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Sparkline snapShot testing renders Sparkline correctly 1`] = `
+<div
+  className=
+      ms-FocusZone
+      &:focus {
+        outline: none;
+      }
+      {
+        display: inline;
+      }
+  data-focuszone-id="FocusZone1"
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onMouseDownCapture={[Function]}
+>
+  <div
+    className=
+
+        {
+          display: inline;
+        }
+  >
+    <svg
+      data-is-focusable={true}
+      height={20}
+      width={80}
+    >
+      <path
+        className="line"
+        d="M0,12.578L11.429,2L22.857,17.446L34.286,8.547L45.714,7.36L57.143,18.304L68.571,16.001L80,18.696"
+        fill="transparent"
+        opacity={1}
+        stroke="#00AA00"
+        strokeWidth={2}
+      />
+      <path
+        aria-label="Sparkline with label 19.64"
+        className="area"
+        d="M0,12.578L11.429,2L22.857,17.446L34.286,8.547L45.714,7.36L57.143,18.304L68.571,16.001L80,18.696L80,20L68.571,20L57.143,20L45.714,20L34.286,20L22.857,20L11.429,20L0,20Z"
+        fill="#00AA00"
+        fillOpacity={0.2}
+        opacity={1}
+      />
+    </svg>
+    <svg
+      data-is-focusable={true}
+      height={20}
+      width={80}
+    >
+      <text
+        className=
+
+            {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #000000;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 12px;
+              font-weight: 400;
+            }
+        dx={8}
+        dy={-5}
+        x="0%"
+        y="100%"
+      >
+        19.64
+      </text>
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`Sparkline snapShot testing renders Sparkline correctly with no legend 1`] = `
+<div
+  className=
+      ms-FocusZone
+      &:focus {
+        outline: none;
+      }
+      {
+        display: inline;
+      }
+  data-focuszone-id="FocusZone3"
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onMouseDownCapture={[Function]}
+>
+  <div
+    className=
+
+        {
+          display: inline;
+        }
+  >
+    <svg
+      data-is-focusable={true}
+      height={20}
+      width={80}
+    >
+      <path
+        className="line"
+        d="M0,14.155L16,5.757L32,7.96L48,2L64,16.187L80,10.079"
+        fill="transparent"
+        opacity={1}
+        stroke="#E60000"
+        strokeWidth={2}
+      />
+      <path
+        aria-label="Sparkline with label 131.33"
+        className="area"
+        d="M0,14.155L16,5.757L32,7.96L48,2L64,16.187L80,10.079L80,20L64,20L48,20L32,20L16,20L0,20Z"
+        fill="#E60000"
+        fillOpacity={0.2}
+        opacity={1}
+      />
+    </svg>
+  </div>
+</div>
+`;
diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
index 4905b1e16ba62..b2f39a9d6132c 100644
--- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.base.tsx
@@ -38,7 +38,6 @@ export interface IMultiStackedBarChartState {
   dataPointCalloutProps?: IChartDataPoint;
   callOutAccessibilityData?: IAccessibilityProps;
   calloutLegend: string;
-  emptyChart?: boolean;
 }
 
 export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarChartProps, IMultiStackedBarChartState> {
@@ -53,6 +52,7 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
   private _calloutAnchorPoint: IChartDataPoint | null;
   private _longestBarTotalValue: number;
   private _isRTL: boolean = getRTL();
+  private _emptyChartId: string;
 
   public constructor(props: IMultiStackedBarChartProps) {
     super(props);
@@ -67,26 +67,15 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
       xCalloutValue: '',
       yCalloutValue: '',
       calloutLegend: '',
-      emptyChart: false,
     };
     this._onLeave = this._onLeave.bind(this);
     this._onBarLeave = this._onBarLeave.bind(this);
     this._calloutId = getId('callout');
-  }
-
-  public componentDidMount(): void {
-    const isChartEmpty: boolean = !(
-      this.props.data &&
-      this.props.data.length > 0 &&
-      this.props.data.filter(item => item.chartData && item.chartData.length === 0).length === 0
-    );
-    if (this.state.emptyChart !== isChartEmpty) {
-      this.setState({ emptyChart: isChartEmpty });
-    }
+    this._emptyChartId = getId('_MSBC_empty');
   }
 
   public render(): JSX.Element {
-    if (!this.state.emptyChart) {
+    if (!this._isChartEmpty()) {
       const { data, theme, culture } = this.props;
       this._adjustProps();
       const { palette } = theme!;
@@ -147,7 +136,12 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
       );
     }
     return (
-      <div id={getId('_MSBC_')} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />
+      <div
+        id={this._emptyChartId}
+        role={'alert'}
+        style={{ opacity: '0' }}
+        aria-label={'Graph has no data to display'}
+      />
     );
   }
 
@@ -563,4 +557,12 @@ export class MultiStackedBarChartBase extends React.Component<IMultiStackedBarCh
     });
     return longestBarTotalValue;
   };
+
+  private _isChartEmpty(): boolean {
+    return !(
+      this.props.data &&
+      this.props.data.length > 0 &&
+      this.props.data.filter(item => item.chartData && item.chartData.length === 0).length === 0
+    );
+  }
 }
diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.test.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.test.tsx
index cd88dbdeb14d5..b6632c0b21523 100644
--- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.test.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.test.tsx
@@ -69,7 +69,7 @@ const secondChartPoints: IChartDataPoint[] = [
   },
 ];
 
-const chartPoints: IChartProps[] = [
+export const chartPoints: IChartProps[] = [
   {
     chartTitle: 'Monitored',
     chartData: firstChartPoints,
@@ -80,7 +80,7 @@ const chartPoints: IChartProps[] = [
   },
 ];
 
-const emptyChartPoints: IChartProps[] = [
+export const emptyChartPoints: IChartProps[] = [
   {
     chartTitle: 'Monitored',
     chartData: [],
diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
index 43b50ea8a25cc..d7e61f03267ce 100644
--- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.base.tsx
@@ -23,7 +23,6 @@ export interface IStackedBarChartState {
   dataPointCalloutProps?: IChartDataPoint;
   callOutAccessibilityData?: IAccessibilityProps;
   calloutLegend: string;
-  emptyChart?: boolean;
 }
 
 export class StackedBarChartBase extends React.Component<IStackedBarChartProps, IStackedBarChartState> {
@@ -37,6 +36,7 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
   private _calloutId: string;
   private _refArray: IRefArrayData[];
   private _calloutAnchorPoint: IChartDataPoint | null;
+  private _emptyChartId: string;
 
   public constructor(props: IStackedBarChartProps) {
     super(props);
@@ -50,28 +50,17 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
       xCalloutValue: '',
       yCalloutValue: '',
       calloutLegend: '',
-      emptyChart: false,
     };
     this._refArray = [];
     this._onLeave = this._onLeave.bind(this);
     this._refCallback = this._refCallback.bind(this);
     this._onBarLeave = this._onBarLeave.bind(this);
     this._calloutId = getId('callout');
-  }
-
-  public componentDidMount(): void {
-    const isChartEmpty: boolean = !(
-      this.props.data &&
-      this.props.data.chartData &&
-      this.props.data.chartData.length > 0
-    );
-    if (this.state.emptyChart !== isChartEmpty) {
-      this.setState({ emptyChart: isChartEmpty });
-    }
+    this._emptyChartId = getId('_SBC_empty');
   }
 
   public render(): JSX.Element {
-    if (!this.state.emptyChart) {
+    if (!this._isChartEmpty()) {
       this._adjustProps();
       const { data, benchmarkData, targetData, hideNumberDisplay, ignoreFixStyle, culture } = this.props;
       const { palette } = this.props.theme!;
@@ -194,7 +183,12 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
       );
     }
     return (
-      <div id={getId('_SBC_')} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />
+      <div
+        id={this._emptyChartId}
+        role={'alert'}
+        style={{ opacity: '0' }}
+        aria-label={'Graph has no data to display'}
+      />
     );
   }
 
@@ -477,4 +471,8 @@ export class StackedBarChartBase extends React.Component<IStackedBarChartProps,
     const yValue = point.yAxisCalloutData || point.data || 0;
     return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`;
   };
+
+  private _isChartEmpty(): boolean {
+    return !(this.props.data && this.props.data.chartData && this.props.data.chartData.length > 0);
+  }
 }
diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.test.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.test.tsx
index 6b9b30be98245..e89a300b9771f 100644
--- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.test.tsx
+++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.test.tsx
@@ -35,12 +35,12 @@ const points: IChartDataPoint[] = [
 ];
 const chartTitle = 'Stacked bar chart 2nd example';
 
-const chartPoints: IChartProps = {
+export const chartPoints: IChartProps = {
   chartTitle: chartTitle,
   chartData: points,
 };
 
-const emptyChartPoints: IChartProps = {
+export const emptyChartPoints: IChartProps = {
   chartTitle: chartTitle,
   chartData: [],
 };
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 768da972c94ff..5d9bc64f1b2a5 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
@@ -35,7 +35,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone1"
+        data-focuszone-id="FocusZone2"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -79,7 +79,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
             </span>
             <div
               hidden={true}
-              id="tooltip2"
+              id="tooltip3"
               style={
                 Object {
                   "border": 0,
@@ -130,7 +130,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]}
@@ -241,7 +241,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -285,7 +285,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
             </span>
             <div
               hidden={true}
-              id="tooltip5"
+              id="tooltip6"
               style={
                 Object {
                   "border": 0,
@@ -336,7 +336,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone6"
+        data-focuszone-id="FocusZone7"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -476,7 +476,7 @@ exports[`MultiStackedBarChart - mouse events Should render callout correctly on
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -699,7 +699,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone1"
+        data-focuszone-id="FocusZone2"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -743,7 +743,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
             </span>
             <div
               hidden={true}
-              id="tooltip2"
+              id="tooltip3"
               style={
                 Object {
                   "border": 0,
@@ -794,7 +794,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]}
@@ -905,7 +905,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -949,7 +949,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
             </span>
             <div
               hidden={true}
-              id="tooltip5"
+              id="tooltip6"
               style={
                 Object {
                   "border": 0,
@@ -1000,7 +1000,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone6"
+        data-focuszone-id="FocusZone7"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1140,7 +1140,7 @@ exports[`MultiStackedBarChart - mouse events Should render customized callout on
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1280,7 +1280,7 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone48"
+        data-focuszone-id="FocusZone55"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1324,7 +1324,7 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
             </span>
             <div
               hidden={true}
-              id="tooltip49"
+              id="tooltip56"
               style={
                 Object {
                   "border": 0,
@@ -1349,7 +1349,7 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone50"
+        data-focuszone-id="FocusZone57"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1454,7 +1454,7 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone51"
+        data-focuszone-id="FocusZone58"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1498,7 +1498,7 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
             </span>
             <div
               hidden={true}
-              id="tooltip52"
+              id="tooltip59"
               style={
                 Object {
                   "border": 0,
@@ -1523,7 +1523,7 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone53"
+        data-focuszone-id="FocusZone60"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1659,7 +1659,7 @@ exports[`MultiStackedBarChart snapShot testing Should not render bar labels in a
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone54"
+              data-focuszone-id="FocusZone61"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1721,7 +1721,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone40"
+        data-focuszone-id="FocusZone46"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1765,7 +1765,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
             </span>
             <div
               hidden={true}
-              id="tooltip41"
+              id="tooltip47"
               style={
                 Object {
                   "border": 0,
@@ -1790,7 +1790,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone42"
+        data-focuszone-id="FocusZone48"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1912,7 +1912,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone43"
+        data-focuszone-id="FocusZone49"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1956,7 +1956,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
             </span>
             <div
               hidden={true}
-              id="tooltip44"
+              id="tooltip50"
               style={
                 Object {
                   "border": 0,
@@ -1981,7 +1981,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone45"
+        data-focuszone-id="FocusZone51"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2134,7 +2134,7 @@ exports[`MultiStackedBarChart snapShot testing Should render absolute-scale vari
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone46"
+              data-focuszone-id="FocusZone52"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2196,7 +2196,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone1"
+        data-focuszone-id="FocusZone2"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2240,7 +2240,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
             </span>
             <div
               hidden={true}
-              id="tooltip2"
+              id="tooltip3"
               style={
                 Object {
                   "border": 0,
@@ -2291,7 +2291,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]}
@@ -2396,7 +2396,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2440,7 +2440,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
             </span>
             <div
               hidden={true}
-              id="tooltip5"
+              id="tooltip6"
               style={
                 Object {
                   "border": 0,
@@ -2491,7 +2491,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone6"
+        data-focuszone-id="FocusZone7"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2627,7 +2627,7 @@ exports[`MultiStackedBarChart snapShot testing renders MultiStackedBarChart corr
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone7"
+              data-focuszone-id="FocusZone8"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2689,7 +2689,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone32"
+        data-focuszone-id="FocusZone37"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2733,7 +2733,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
             </span>
             <div
               hidden={true}
-              id="tooltip33"
+              id="tooltip38"
               style={
                 Object {
                   "border": 0,
@@ -2774,7 +2774,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone34"
+        data-focuszone-id="FocusZone39"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2879,7 +2879,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone35"
+        data-focuszone-id="FocusZone40"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2923,7 +2923,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
             </span>
             <div
               hidden={true}
-              id="tooltip36"
+              id="tooltip41"
               style={
                 Object {
                   "border": 0,
@@ -2964,7 +2964,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone37"
+        data-focuszone-id="FocusZone42"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3100,7 +3100,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideDenominator correctly
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone38"
+              data-focuszone-id="FocusZone43"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3162,7 +3162,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone9"
+        data-focuszone-id="FocusZone11"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3206,7 +3206,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             </span>
             <div
               hidden={true}
-              id="tooltip10"
+              id="tooltip12"
               style={
                 Object {
                   "border": 0,
@@ -3257,7 +3257,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone11"
+        data-focuszone-id="FocusZone13"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3362,7 +3362,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone12"
+        data-focuszone-id="FocusZone14"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3406,7 +3406,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             </span>
             <div
               hidden={true}
-              id="tooltip13"
+              id="tooltip15"
               style={
                 Object {
                   "border": 0,
@@ -3457,7 +3457,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideLegend correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone14"
+        data-focuszone-id="FocusZone16"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3584,7 +3584,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone24"
+        data-focuszone-id="FocusZone28"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3628,7 +3628,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             </span>
             <div
               hidden={true}
-              id="tooltip25"
+              id="tooltip29"
               style={
                 Object {
                   "border": 0,
@@ -3653,7 +3653,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone26"
+        data-focuszone-id="FocusZone30"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3758,7 +3758,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone27"
+        data-focuszone-id="FocusZone31"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3802,7 +3802,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             </span>
             <div
               hidden={true}
-              id="tooltip28"
+              id="tooltip32"
               style={
                 Object {
                   "border": 0,
@@ -3853,7 +3853,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone29"
+        data-focuszone-id="FocusZone33"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3989,7 +3989,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideRatio correctly 1`] =
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone30"
+              data-focuszone-id="FocusZone34"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4232,7 +4232,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone16"
+        data-focuszone-id="FocusZone19"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -4276,7 +4276,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
             </span>
             <div
               hidden={true}
-              id="tooltip17"
+              id="tooltip20"
               style={
                 Object {
                   "border": 0,
@@ -4327,7 +4327,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone18"
+        data-focuszone-id="FocusZone21"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -4432,7 +4432,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone19"
+        data-focuszone-id="FocusZone22"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -4476,7 +4476,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
             </span>
             <div
               hidden={true}
-              id="tooltip20"
+              id="tooltip23"
               style={
                 Object {
                   "border": 0,
@@ -4527,7 +4527,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone21"
+        data-focuszone-id="FocusZone24"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -4663,7 +4663,7 @@ exports[`MultiStackedBarChart snapShot testing renders hideTooltip correctly 1`]
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone22"
+              data-focuszone-id="FocusZone25"
               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 e97b8b9e5af37..0d819c590b4bf 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
@@ -22,7 +22,7 @@ exports[`StackedBarChart - mouse events Should render callout correctly on mouse
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone1"
+    data-focuszone-id="FocusZone2"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -66,7 +66,7 @@ exports[`StackedBarChart - mouse events Should render callout correctly on mouse
         </span>
         <div
           hidden={true}
-          id="tooltip2"
+          id="tooltip3"
           style={
             Object {
               "border": 0,
@@ -117,7 +117,7 @@ exports[`StackedBarChart - mouse events Should render callout correctly on mouse
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -392,7 +392,7 @@ exports[`StackedBarChart - mouse events Should render customized callout on mous
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone1"
+    data-focuszone-id="FocusZone2"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -436,7 +436,7 @@ exports[`StackedBarChart - mouse events Should render customized callout on mous
         </span>
         <div
           hidden={true}
-          id="tooltip2"
+          id="tooltip3"
           style={
             Object {
               "border": 0,
@@ -487,7 +487,7 @@ exports[`StackedBarChart - mouse events Should render customized callout on mous
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -679,7 +679,7 @@ exports[`StackedBarChart snapShot testing renders StackedBarChart correctly 1`]
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone1"
+    data-focuszone-id="FocusZone2"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -723,7 +723,7 @@ exports[`StackedBarChart snapShot testing renders StackedBarChart correctly 1`]
         </span>
         <div
           hidden={true}
-          id="tooltip2"
+          id="tooltip3"
           style={
             Object {
               "border": 0,
@@ -774,7 +774,7 @@ exports[`StackedBarChart snapShot testing renders StackedBarChart correctly 1`]
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -886,7 +886,7 @@ exports[`StackedBarChart snapShot testing renders enabledLegendsWrapLines correc
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone26"
+    data-focuszone-id="FocusZone33"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -930,7 +930,7 @@ exports[`StackedBarChart snapShot testing renders enabledLegendsWrapLines correc
         </span>
         <div
           hidden={true}
-          id="tooltip27"
+          id="tooltip34"
           style={
             Object {
               "border": 0,
@@ -981,7 +981,7 @@ exports[`StackedBarChart snapShot testing renders enabledLegendsWrapLines correc
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone28"
+    data-focuszone-id="FocusZone35"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1093,7 +1093,7 @@ exports[`StackedBarChart snapShot testing renders hideDenominator correctly 1`]
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone17"
+    data-focuszone-id="FocusZone22"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1137,7 +1137,7 @@ exports[`StackedBarChart snapShot testing renders hideDenominator correctly 1`]
         </span>
         <div
           hidden={true}
-          id="tooltip18"
+          id="tooltip23"
           style={
             Object {
               "border": 0,
@@ -1178,7 +1178,7 @@ exports[`StackedBarChart snapShot testing renders hideDenominator correctly 1`]
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone19"
+    data-focuszone-id="FocusZone24"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1290,7 +1290,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]}
@@ -1334,7 +1334,7 @@ exports[`StackedBarChart snapShot testing renders hideLegend correctly 1`] = `
         </span>
         <div
           hidden={true}
-          id="tooltip6"
+          id="tooltip8"
           style={
             Object {
               "border": 0,
@@ -1385,7 +1385,7 @@ exports[`StackedBarChart snapShot testing renders hideLegend correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone7"
+    data-focuszone-id="FocusZone9"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1497,7 +1497,7 @@ exports[`StackedBarChart snapShot testing renders hideNumberDisplay correctly 1`
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone13"
+    data-focuszone-id="FocusZone17"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1541,7 +1541,7 @@ exports[`StackedBarChart snapShot testing renders hideNumberDisplay correctly 1`
         </span>
         <div
           hidden={true}
-          id="tooltip14"
+          id="tooltip18"
           style={
             Object {
               "border": 0,
@@ -1566,7 +1566,7 @@ exports[`StackedBarChart snapShot testing renders hideNumberDisplay correctly 1`
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone15"
+    data-focuszone-id="FocusZone19"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1678,7 +1678,7 @@ exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone12"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1722,7 +1722,7 @@ exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = `
         </span>
         <div
           hidden={true}
-          id="tooltip10"
+          id="tooltip13"
           style={
             Object {
               "border": 0,
@@ -1773,7 +1773,7 @@ exports[`StackedBarChart snapShot testing renders hideTooltip correctly 1`] = `
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone11"
+    data-focuszone-id="FocusZone14"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1885,7 +1885,7 @@ exports[`StackedBarChart snapShot testing renders ignoreFixStyle correctly 1`] =
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone21"
+    data-focuszone-id="FocusZone27"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1929,7 +1929,7 @@ exports[`StackedBarChart snapShot testing renders ignoreFixStyle correctly 1`] =
         </span>
         <div
           hidden={true}
-          id="tooltip22"
+          id="tooltip28"
           style={
             Object {
               "border": 0,
@@ -1954,7 +1954,7 @@ exports[`StackedBarChart snapShot testing renders ignoreFixStyle correctly 1`] =
         &:focus {
           outline: none;
         }
-    data-focuszone-id="FocusZone23"
+    data-focuszone-id="FocusZone29"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2089,7 +2089,7 @@ exports[`StackedBarChart snapShot testing renders ignoreFixStyle correctly 1`] =
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone24"
+              data-focuszone-id="FocusZone30"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
index 6ce8d3317cce4..830eef808829d 100644
--- a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
+++ b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
@@ -74,6 +74,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
   private _xAxisType: XAxisTypes;
   private _calloutAnchorPoint: IVerticalBarChartDataPoint | null;
   private _domainMargin: number;
+  private _emptyChartId: string;
 
   public constructor(props: IVerticalBarChartProps) {
     super(props);
@@ -100,6 +101,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
         ? (getTypeOfAxis(this.props.data![0].x, true) as XAxisTypes)
         : XAxisTypes.StringAxis;
     this._domainMargin = MIN_DOMAIN_MARGIN;
+    this._emptyChartId = getId('_VBC_empty');
   }
 
   public render(): JSX.Element {
@@ -181,7 +183,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
       />
     ) : (
       <div
-        id={getId('_VBC_empty')}
+        id={this._emptyChartId}
         role={'alert'}
         style={{ opacity: '0' }}
         aria-label={'Graph has no data to display'}
diff --git a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
index 2632076c3df9c..828e8962dccc6 100644
--- a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -29,7 +29,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -69,7 +69,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -97,7 +97,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -114,7 +114,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             data-is-focusable={true}
             fill="#0078d4"
             height={51}
-            id="_VBC_bar_14"
+            id="_VBC_bar_15"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -153,7 +153,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             data-is-focusable={true}
             fill="#002050"
             height={255}
-            id="_VBC_bar_15"
+            id="_VBC_bar_16"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -192,7 +192,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             data-is-focusable={true}
             fill="#00188f"
             height={153}
-            id="_VBC_bar_16"
+            id="_VBC_bar_17"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -250,7 +250,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -726,7 +726,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -739,7 +739,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -779,7 +779,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -807,7 +807,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -824,7 +824,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
             data-is-focusable={true}
             fill="#0078d4"
             height={51}
-            id="_VBC_bar_8"
+            id="_VBC_bar_9"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -863,7 +863,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
             data-is-focusable={true}
             fill="#002050"
             height={255}
-            id="_VBC_bar_9"
+            id="_VBC_bar_10"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -902,7 +902,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
             data-is-focusable={true}
             fill="#00188f"
             height={153}
-            id="_VBC_bar_10"
+            id="_VBC_bar_11"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -960,7 +960,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1355,7 +1355,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_36"
+  id="chart_44"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1368,7 +1368,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone37"
+    data-focuszone-id="FocusZone45"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1408,7 +1408,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_36"
+        id="xAxisGElementchart_44"
         transform="translate(0, -35)"
       />
       <g
@@ -1436,7 +1436,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_36"
+        id="yAxisGElementchart_44"
         transform="translate(40, 0)"
       />
       <g>
@@ -1492,7 +1492,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone38"
+              data-focuszone-id="FocusZone46"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1808,7 +1808,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1821,7 +1821,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1861,7 +1861,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, -35)"
       />
       <g
@@ -1889,7 +1889,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -1945,7 +1945,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone4"
+              data-focuszone-id="FocusZone5"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2261,7 +2261,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
         overflow: hidden;
         width: 100%;
       }
-  id="chart_16"
+  id="chart_20"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2274,7 +2274,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone17"
+    data-focuszone-id="FocusZone21"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2314,7 +2314,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
             & path {
               display: none;
             }
-        id="xAxisGElementchart_16"
+        id="xAxisGElementchart_20"
         transform="translate(0, -35)"
       />
       <g
@@ -2342,7 +2342,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_16"
+        id="yAxisGElementchart_20"
         transform="translate(40, 0)"
       />
       <g>
@@ -2381,7 +2381,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone18"
+        data-focuszone-id="FocusZone22"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2694,7 +2694,7 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_7"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2707,7 +2707,7 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone8"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2747,7 +2747,7 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_7"
+        id="xAxisGElementchart_9"
         transform="translate(0, -35)"
       />
       <g
@@ -2775,7 +2775,7 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_7"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -2807,7 +2807,7 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_11"
+  id="chart_14"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2820,7 +2820,7 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone12"
+    data-focuszone-id="FocusZone15"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2860,7 +2860,7 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_11"
+        id="xAxisGElementchart_14"
         transform="translate(0, -35)"
       />
       <g
@@ -2888,7 +2888,7 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_11"
+        id="yAxisGElementchart_14"
         transform="translate(40, 0)"
       />
       <g>
@@ -2944,7 +2944,7 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone13"
+              data-focuszone-id="FocusZone16"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3260,7 +3260,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
         overflow: hidden;
         width: 100%;
       }
-  id="chart_21"
+  id="chart_26"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3273,7 +3273,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone22"
+    data-focuszone-id="FocusZone27"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3313,7 +3313,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
             & path {
               display: none;
             }
-        id="xAxisGElementchart_21"
+        id="xAxisGElementchart_26"
         transform="translate(0, -35)"
       />
       <g
@@ -3341,7 +3341,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_21"
+        id="yAxisGElementchart_26"
         transform="translate(40, 0)"
       />
       <g>
@@ -3397,7 +3397,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone23"
+              data-focuszone-id="FocusZone28"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3713,7 +3713,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
         overflow: hidden;
         width: 100%;
       }
-  id="chart_26"
+  id="chart_32"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3726,7 +3726,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone27"
+    data-focuszone-id="FocusZone33"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3766,7 +3766,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
             & path {
               display: none;
             }
-        id="xAxisGElementchart_26"
+        id="xAxisGElementchart_32"
         transform="translate(0, -35)"
       />
       <g
@@ -3794,7 +3794,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_26"
+        id="yAxisGElementchart_32"
         transform="translate(40, 0)"
       />
       <g>
@@ -3850,7 +3850,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone28"
+              data-focuszone-id="FocusZone34"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4166,7 +4166,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
         overflow: hidden;
         width: 100%;
       }
-  id="chart_31"
+  id="chart_38"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4179,7 +4179,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone32"
+    data-focuszone-id="FocusZone39"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -4219,7 +4219,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
             & path {
               display: none;
             }
-        id="xAxisGElementchart_31"
+        id="xAxisGElementchart_38"
         transform="translate(0, -35)"
       />
       <g
@@ -4247,7 +4247,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_31"
+        id="yAxisGElementchart_38"
         transform="translate(40, 0)"
       />
       <g>
@@ -4303,7 +4303,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone33"
+              data-focuszone-id="FocusZone40"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap
index fa893cb669fbe..7ddc5bc624d93 100644
--- a/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap
+++ b/packages/react-charting/src/components/VerticalBarChart/__snapshots__/VerticalBarChartRTL.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
           overflow: hidden;
           width: 100%;
         }
-    id="chart_492"
+    id="chart_514"
     role="presentation"
   >
     <div
@@ -29,7 +29,7 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
           {
             overflow: auto;
           }
-      data-focuszone-id="FocusZone493"
+      data-focuszone-id="FocusZone515"
     >
       <svg
         focusable="false"
@@ -63,7 +63,7 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
               & path {
                 display: none;
               }
-          id="xAxisGElementchart_492"
+          id="xAxisGElementchart_514"
           transform="translate(0, -35)"
         />
         <g
@@ -91,7 +91,7 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                 opacity: 0.1;
                 stroke: rgb(179, 179, 179);
               }
-          id="yAxisGElementchart_492"
+          id="yAxisGElementchart_514"
           transform="translate(40, 0)"
         />
         <g>
@@ -138,7 +138,7 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
                     &:focus {
                       outline: none;
                     }
-                data-focuszone-id="FocusZone494"
+                data-focuszone-id="FocusZone516"
                 role="listbox"
               >
                 <div
@@ -441,7 +441,7 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
           overflow: hidden;
           width: 100%;
         }
-    id="chart_497"
+    id="chart_520"
     role="presentation"
   >
     <div
@@ -453,7 +453,7 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
           {
             overflow: auto;
           }
-      data-focuszone-id="FocusZone498"
+      data-focuszone-id="FocusZone521"
     >
       <svg
         focusable="false"
@@ -487,7 +487,7 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
               & path {
                 display: none;
               }
-          id="xAxisGElementchart_497"
+          id="xAxisGElementchart_520"
           transform="translate(0, -35)"
         />
         <g
@@ -515,7 +515,7 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                 opacity: 0.1;
                 stroke: rgb(179, 179, 179);
               }
-          id="yAxisGElementchart_497"
+          id="yAxisGElementchart_520"
           transform="translate(40, 0)"
         />
         <g>
@@ -562,7 +562,7 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
                     &:focus {
                       outline: none;
                     }
-                data-focuszone-id="FocusZone499"
+                data-focuszone-id="FocusZone522"
                 role="listbox"
               >
                 <div
@@ -878,7 +878,7 @@ exports[`Should reflect theme change 1`] = `
             overflow: hidden;
             width: 100%;
           }
-      id="chart_505"
+      id="chart_529"
       role="presentation"
     >
       <div
@@ -890,7 +890,7 @@ exports[`Should reflect theme change 1`] = `
             {
               overflow: auto;
             }
-        data-focuszone-id="FocusZone506"
+        data-focuszone-id="FocusZone530"
       >
         <svg
           focusable="false"
@@ -924,7 +924,7 @@ exports[`Should reflect theme change 1`] = `
                 & path {
                   display: none;
                 }
-            id="xAxisGElementchart_505"
+            id="xAxisGElementchart_529"
             transform="translate(0, -35)"
           />
           <g
@@ -952,7 +952,7 @@ exports[`Should reflect theme change 1`] = `
                   opacity: 0.1;
                   stroke: rgb(179, 179, 179);
                 }
-            id="yAxisGElementchart_505"
+            id="yAxisGElementchart_529"
             transform="translate(40, 0)"
           />
           <g>
@@ -999,7 +999,7 @@ exports[`Should reflect theme change 1`] = `
                       &:focus {
                         outline: none;
                       }
-                  data-focuszone-id="FocusZone507"
+                  data-focuszone-id="FocusZone531"
                   role="listbox"
                 >
                   <div
@@ -1290,7 +1290,7 @@ exports[`Vertical bar chart re-rendering Should re-render the vertical bar chart
 <div>
   <div
     aria-label="Graph has no data to display"
-    id="_VBC_empty510"
+    id="_VBC_empty534"
     role="alert"
     style="opacity: 0;"
   />
@@ -1314,7 +1314,7 @@ exports[`Vertical bar chart re-rendering Should re-render the vertical bar chart
           overflow: hidden;
           width: 100%;
         }
-    id="chart_511"
+    id="chart_535"
     role="presentation"
   >
     <div
@@ -1326,7 +1326,7 @@ exports[`Vertical bar chart re-rendering Should re-render the vertical bar chart
           {
             overflow: auto;
           }
-      data-focuszone-id="FocusZone512"
+      data-focuszone-id="FocusZone536"
     >
       <svg
         focusable="false"
@@ -1360,7 +1360,7 @@ exports[`Vertical bar chart re-rendering Should re-render the vertical bar chart
               & path {
                 display: none;
               }
-          id="xAxisGElementchart_511"
+          id="xAxisGElementchart_535"
           transform="translate(0, -35)"
         />
         <g
@@ -1388,7 +1388,7 @@ exports[`Vertical bar chart re-rendering Should re-render the vertical bar chart
                 opacity: 0.1;
                 stroke: rgb(179, 179, 179);
               }
-          id="yAxisGElementchart_511"
+          id="yAxisGElementchart_535"
           transform="translate(40, 0)"
         />
         <g>
@@ -1435,7 +1435,7 @@ exports[`Vertical bar chart re-rendering Should re-render the vertical bar chart
                     &:focus {
                       outline: none;
                     }
-                data-focuszone-id="FocusZone513"
+                data-focuszone-id="FocusZone537"
                 role="listbox"
               >
                 <div
@@ -1738,7 +1738,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
           overflow: hidden;
           width: 100%;
         }
-    id="chart_32"
+    id="chart_36"
     role="presentation"
   >
     <div
@@ -1750,7 +1750,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
           {
             overflow: auto;
           }
-      data-focuszone-id="FocusZone33"
+      data-focuszone-id="FocusZone37"
     >
       <svg
         focusable="false"
@@ -1784,7 +1784,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
               & path {
                 display: none;
               }
-          id="xAxisGElementchart_32"
+          id="xAxisGElementchart_36"
           transform="translate(0, -35)"
         />
         <g
@@ -1812,7 +1812,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
                 opacity: 0.1;
                 stroke: rgb(179, 179, 179);
               }
-          id="yAxisGElementchart_32"
+          id="yAxisGElementchart_36"
           transform="translate(40, 0)"
         />
         <g>
@@ -1859,7 +1859,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
                     &:focus {
                       outline: none;
                     }
-                data-focuszone-id="FocusZone34"
+                data-focuszone-id="FocusZone38"
                 role="listbox"
               >
                 <div
@@ -2162,7 +2162,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
           overflow: hidden;
           width: 100%;
         }
-    id="chart_37"
+    id="chart_42"
     role="presentation"
   >
     <div
@@ -2174,7 +2174,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
           {
             overflow: auto;
           }
-      data-focuszone-id="FocusZone38"
+      data-focuszone-id="FocusZone43"
     >
       <svg
         focusable="false"
@@ -2208,7 +2208,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
               & path {
                 display: none;
               }
-          id="xAxisGElementchart_37"
+          id="xAxisGElementchart_42"
           transform="translate(0, -35)"
         />
         <g
@@ -2236,7 +2236,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
                 opacity: 0.1;
                 stroke: rgb(179, 179, 179);
               }
-          id="yAxisGElementchart_37"
+          id="yAxisGElementchart_42"
           transform="translate(40, 0)"
         />
         <g>
@@ -2284,7 +2284,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
                     &:focus {
                       outline: none;
                     }
-                data-focuszone-id="FocusZone39"
+                data-focuszone-id="FocusZone44"
                 role="listbox"
               >
                 <div
@@ -2664,7 +2664,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2677,7 +2677,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2717,7 +2717,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -2745,7 +2745,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -2762,7 +2762,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             data-is-focusable={true}
             fill="#0078d4"
             height={51}
-            id="_VBC_bar_14"
+            id="_VBC_bar_15"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -2801,7 +2801,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             data-is-focusable={true}
             fill="#002050"
             height={255}
-            id="_VBC_bar_15"
+            id="_VBC_bar_16"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -2840,7 +2840,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             data-is-focusable={true}
             fill="#00188f"
             height={153}
-            id="_VBC_bar_16"
+            id="_VBC_bar_17"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -2898,7 +2898,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3374,7 +3374,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3387,7 +3387,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3427,7 +3427,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -3455,7 +3455,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -3472,7 +3472,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
             data-is-focusable={true}
             fill="#0078d4"
             height={51}
-            id="_VBC_bar_8"
+            id="_VBC_bar_9"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -3511,7 +3511,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
             data-is-focusable={true}
             fill="#002050"
             height={255}
-            id="_VBC_bar_9"
+            id="_VBC_bar_10"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -3550,7 +3550,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
             data-is-focusable={true}
             fill="#00188f"
             height={153}
-            id="_VBC_bar_10"
+            id="_VBC_bar_11"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseLeave={[Function]}
@@ -3608,7 +3608,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -4003,7 +4003,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_36"
+  id="chart_44"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4016,7 +4016,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone37"
+    data-focuszone-id="FocusZone45"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -4056,7 +4056,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_36"
+        id="xAxisGElementchart_44"
         transform="translate(0, -35)"
       />
       <g
@@ -4084,7 +4084,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_36"
+        id="yAxisGElementchart_44"
         transform="translate(40, 0)"
       />
       <g>
@@ -4140,7 +4140,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone38"
+              data-focuszone-id="FocusZone46"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4456,7 +4456,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4469,7 +4469,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -4509,7 +4509,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, -35)"
       />
       <g
@@ -4537,7 +4537,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -4593,7 +4593,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone4"
+              data-focuszone-id="FocusZone5"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4909,7 +4909,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
         overflow: hidden;
         width: 100%;
       }
-  id="chart_16"
+  id="chart_20"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4922,7 +4922,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone17"
+    data-focuszone-id="FocusZone21"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -4962,7 +4962,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
             & path {
               display: none;
             }
-        id="xAxisGElementchart_16"
+        id="xAxisGElementchart_20"
         transform="translate(0, -35)"
       />
       <g
@@ -4990,7 +4990,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_16"
+        id="yAxisGElementchart_20"
         transform="translate(40, 0)"
       />
       <g>
@@ -5029,7 +5029,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone18"
+        data-focuszone-id="FocusZone22"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -5342,7 +5342,7 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_7"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -5355,7 +5355,7 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone8"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -5395,7 +5395,7 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_7"
+        id="xAxisGElementchart_9"
         transform="translate(0, -35)"
       />
       <g
@@ -5423,7 +5423,7 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_7"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g>
@@ -5455,7 +5455,7 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_11"
+  id="chart_14"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -5468,7 +5468,7 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone12"
+    data-focuszone-id="FocusZone15"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -5508,7 +5508,7 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_11"
+        id="xAxisGElementchart_14"
         transform="translate(0, -35)"
       />
       <g
@@ -5536,7 +5536,7 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_11"
+        id="yAxisGElementchart_14"
         transform="translate(40, 0)"
       />
       <g>
@@ -5592,7 +5592,7 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone13"
+              data-focuszone-id="FocusZone16"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -5908,7 +5908,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
         overflow: hidden;
         width: 100%;
       }
-  id="chart_21"
+  id="chart_26"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -5921,7 +5921,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone22"
+    data-focuszone-id="FocusZone27"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -5961,7 +5961,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
             & path {
               display: none;
             }
-        id="xAxisGElementchart_21"
+        id="xAxisGElementchart_26"
         transform="translate(0, -35)"
       />
       <g
@@ -5989,7 +5989,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_21"
+        id="yAxisGElementchart_26"
         transform="translate(40, 0)"
       />
       <g>
@@ -6045,7 +6045,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone23"
+              data-focuszone-id="FocusZone28"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -6361,7 +6361,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
         overflow: hidden;
         width: 100%;
       }
-  id="chart_26"
+  id="chart_32"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -6374,7 +6374,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone27"
+    data-focuszone-id="FocusZone33"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -6414,7 +6414,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
             & path {
               display: none;
             }
-        id="xAxisGElementchart_26"
+        id="xAxisGElementchart_32"
         transform="translate(0, -35)"
       />
       <g
@@ -6442,7 +6442,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_26"
+        id="yAxisGElementchart_32"
         transform="translate(40, 0)"
       />
       <g>
@@ -6498,7 +6498,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone28"
+              data-focuszone-id="FocusZone34"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -6814,7 +6814,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
         overflow: hidden;
         width: 100%;
       }
-  id="chart_31"
+  id="chart_38"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -6827,7 +6827,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone32"
+    data-focuszone-id="FocusZone39"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -6867,7 +6867,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
             & path {
               display: none;
             }
-        id="xAxisGElementchart_31"
+        id="xAxisGElementchart_38"
         transform="translate(0, -35)"
       />
       <g
@@ -6895,7 +6895,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_31"
+        id="yAxisGElementchart_38"
         transform="translate(40, 0)"
       />
       <g>
@@ -6951,7 +6951,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone33"
+              data-focuszone-id="FocusZone40"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
index c92745e47f0cb..7dd1a5a5a85e9 100644
--- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
+++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
@@ -68,7 +68,6 @@ export interface IVerticalStackedBarChartState extends IBasestate {
   activeXAxisDataPoint: number | string;
   callOutAccessibilityData?: IAccessibilityProps;
   calloutLegend: string;
-  emptyChart?: boolean;
 }
 export class VerticalStackedBarChartBase extends React.Component<
   IVerticalStackedBarChartProps,
@@ -91,6 +90,7 @@ export class VerticalStackedBarChartBase extends React.Component<
   private _calloutAnchorPoint: IVSChartDataPoint | null;
   private _domainMargin: number;
   private _classNames: IProcessedStyleSet<IVerticalStackedBarChartStyles>;
+  private _emptyChartId: string;
 
   public constructor(props: IVerticalStackedBarChartProps) {
     super(props);
@@ -107,11 +107,6 @@ export class VerticalStackedBarChartBase extends React.Component<
       yCalloutValue: '',
       activeXAxisDataPoint: '',
       calloutLegend: '',
-      emptyChart: !(
-        this.props.data &&
-        this.props.data.length > 0 &&
-        this.props.data.filter(item => item.chartData.length === 0).length === 0
-      ),
     };
     warnDeprecations(COMPONENT_NAME, props, {
       colors: 'IVSChartDataPoint.color',
@@ -120,18 +115,13 @@ export class VerticalStackedBarChartBase extends React.Component<
     this._handleMouseOut = this._handleMouseOut.bind(this);
     this._calloutId = getId('callout');
     this._tooltipId = getId('VSBCTooltipId_');
-    if (
-      this.props.data &&
-      this.props.data.length &&
-      !this.props.data.filter((item: IVerticalStackedChartProps) => item.xAxisPoint === undefined).length
-    ) {
+    if (this._isChartEmpty()) {
       this._adjustProps();
       this._dataset = this._createDataSetLayer();
-    } else {
-      this.state = { ...this.state, emptyChart: true };
     }
     this._createLegendsForLine = memoizeFunction((data: IVerticalStackedChartProps[]) => this._getLineLegends(data));
     this._domainMargin = MIN_DOMAIN_MARGIN;
+    this._emptyChartId = getId('_VSBC_empty');
   }
 
   public componentDidUpdate(prevProps: IVerticalStackedBarChartProps): void {
@@ -146,7 +136,7 @@ export class VerticalStackedBarChartBase extends React.Component<
   }
 
   public render(): React.ReactNode {
-    if (!this.state.emptyChart) {
+    if (!this._isChartEmpty()) {
       this._adjustProps();
       const _isHavingLines = this.props.data.some(
         (item: IVerticalStackedChartProps) => item.lineData && item.lineData.length > 0,
@@ -231,7 +221,12 @@ export class VerticalStackedBarChartBase extends React.Component<
       );
     }
     return (
-      <div id={getId('_VSBC_')} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />
+      <div
+        id={this._emptyChartId}
+        role={'alert'}
+        style={{ opacity: '0' }}
+        aria-label={'Graph has no data to display'}
+      />
     );
   }
 
@@ -1042,4 +1037,12 @@ export class VerticalStackedBarChartBase extends React.Component<
       right: this.margins.right! + this._domainMargin,
     };
   };
+
+  private _isChartEmpty(): boolean {
+    return !(
+      this.props.data &&
+      this.props.data.length > 0 &&
+      this.props.data.filter(item => item.chartData.length === 0).length === 0
+    );
+  }
 }
diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx
index 5793e1137061b..a91183d816c10 100644
--- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx
+++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.test.tsx
@@ -70,7 +70,7 @@ const secondChartPoints: IVSChartDataPoint[] = [
   },
 ];
 
-const chartPoints: IVerticalStackedChartProps[] = [
+export const chartPoints: IVerticalStackedChartProps[] = [
   { chartData: firstChartPoints, xAxisPoint: 0 },
   { chartData: secondChartPoints, xAxisPoint: 20 },
 ];
@@ -84,7 +84,7 @@ const chartPoints2: IVerticalStackedChartProps[] = [
   },
 ];
 
-const emptyChartPoints: IVerticalStackedChartProps[] = [{ chartData: [], xAxisPoint: 0 }];
+export const emptyChartPoints: IVerticalStackedChartProps[] = [{ chartData: [], xAxisPoint: 0 }];
 
 describe('VerticalStackedBarChart snapShot testing', () => {
   it('renders VerticalStackedBarChart correctly', () => {
diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx
new file mode 100644
index 0000000000000..caae9733cb38e
--- /dev/null
+++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChartRTL.test.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { queryAllByAttribute, render, waitFor } from '@testing-library/react';
+import { emptyChartPoints, chartPoints } from './VerticalStackedBarChart.test';
+import { VerticalStackedBarChart } from './index';
+
+describe('Vertical stacked bar chart rendering', () => {
+  test('Should re-render the Vertical stacked bar chart with data', async () => {
+    // Arrange
+    const { container, rerender } = render(<VerticalStackedBarChart data={emptyChartPoints} />);
+    const getById = queryAllByAttribute.bind(null, 'id');
+    // Assert
+    expect(container).toMatchSnapshot();
+    expect(getById(container, /_VSBC_empty/i)).toHaveLength(1);
+    // Act
+    rerender(<VerticalStackedBarChart data={chartPoints} />);
+    await waitFor(() => {
+      // Assert
+      expect(container).toMatchSnapshot();
+      expect(getById(container, /_VSBC_empty/i)).toHaveLength(0);
+    });
+  });
+});
diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
index 91e13ed176a12..d2915a27babcf 100644
--- a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
+++ b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -29,7 +29,7 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -69,7 +69,7 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -97,7 +97,7 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -280,7 +280,7 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -665,7 +665,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -678,7 +678,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -718,7 +718,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -746,7 +746,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -929,7 +929,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1232,7 +1232,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1245,7 +1245,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1285,7 +1285,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, 275)"
       />
       <g
@@ -1313,7 +1313,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g>
@@ -1515,7 +1515,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone4"
+        data-focuszone-id="FocusZone5"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -1930,7 +1930,7 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1
         overflow: hidden;
         width: 100%;
       }
-  id="chart_41"
+  id="chart_50"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1943,7 +1943,7 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone42"
+    data-focuszone-id="FocusZone51"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -1983,7 +1983,7 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1
             & path {
               display: none;
             }
-        id="xAxisGElementchart_41"
+        id="xAxisGElementchart_50"
         transform="translate(0, -35)"
       />
       <g
@@ -2011,7 +2011,7 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_41"
+        id="yAxisGElementchart_50"
         transform="translate(40, 0)"
       />
       <g />
@@ -2064,7 +2064,7 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone43"
+              data-focuszone-id="FocusZone52"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2290,7 +2290,7 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar
         overflow: hidden;
         width: 100%;
       }
-  id="chart_2"
+  id="chart_3"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2303,7 +2303,7 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone3"
+    data-focuszone-id="FocusZone4"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2343,7 +2343,7 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar
             & path {
               display: none;
             }
-        id="xAxisGElementchart_2"
+        id="xAxisGElementchart_3"
         transform="translate(0, -35)"
       />
       <g
@@ -2371,7 +2371,7 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_2"
+        id="yAxisGElementchart_3"
         transform="translate(40, 0)"
       />
       <g />
@@ -2424,7 +2424,7 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone4"
+              data-focuszone-id="FocusZone5"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2650,7 +2650,7 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine
         overflow: hidden;
         width: 100%;
       }
-  id="chart_16"
+  id="chart_20"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2663,7 +2663,7 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone17"
+    data-focuszone-id="FocusZone21"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -2703,7 +2703,7 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine
             & path {
               display: none;
             }
-        id="xAxisGElementchart_16"
+        id="xAxisGElementchart_20"
         transform="translate(0, -35)"
       />
       <g
@@ -2731,7 +2731,7 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_16"
+        id="yAxisGElementchart_20"
         transform="translate(40, 0)"
       />
       <g />
@@ -2767,7 +2767,7 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone18"
+        data-focuszone-id="FocusZone22"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2990,7 +2990,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1
         overflow: hidden;
         width: 100%;
       }
-  id="chart_7"
+  id="chart_9"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3003,7 +3003,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone8"
+    data-focuszone-id="FocusZone10"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3043,7 +3043,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1
             & path {
               display: none;
             }
-        id="xAxisGElementchart_7"
+        id="xAxisGElementchart_9"
         transform="translate(0, -35)"
       />
       <g
@@ -3071,7 +3071,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_7"
+        id="yAxisGElementchart_9"
         transform="translate(40, 0)"
       />
       <g />
@@ -3100,7 +3100,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly
         overflow: hidden;
         width: 100%;
       }
-  id="chart_11"
+  id="chart_14"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3113,7 +3113,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone12"
+    data-focuszone-id="FocusZone15"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3153,7 +3153,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly
             & path {
               display: none;
             }
-        id="xAxisGElementchart_11"
+        id="xAxisGElementchart_14"
         transform="translate(0, -35)"
       />
       <g
@@ -3181,7 +3181,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_11"
+        id="yAxisGElementchart_14"
         transform="translate(40, 0)"
       />
       <g />
@@ -3234,7 +3234,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone13"
+              data-focuszone-id="FocusZone16"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3460,7 +3460,7 @@ exports[`VerticalStackedBarChart snapShot testing renders isCalloutForStack corr
         overflow: hidden;
         width: 100%;
       }
-  id="chart_31"
+  id="chart_38"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3473,7 +3473,7 @@ exports[`VerticalStackedBarChart snapShot testing renders isCalloutForStack corr
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone32"
+    data-focuszone-id="FocusZone39"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3513,7 +3513,7 @@ exports[`VerticalStackedBarChart snapShot testing renders isCalloutForStack corr
             & path {
               display: none;
             }
-        id="xAxisGElementchart_31"
+        id="xAxisGElementchart_38"
         transform="translate(0, -35)"
       />
       <g
@@ -3541,7 +3541,7 @@ exports[`VerticalStackedBarChart snapShot testing renders isCalloutForStack corr
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_31"
+        id="yAxisGElementchart_38"
         transform="translate(40, 0)"
       />
       <g />
@@ -3594,7 +3594,7 @@ exports[`VerticalStackedBarChart snapShot testing renders isCalloutForStack corr
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone33"
+              data-focuszone-id="FocusZone40"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3820,7 +3820,7 @@ exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip
         overflow: hidden;
         width: 100%;
       }
-  id="chart_21"
+  id="chart_26"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3833,7 +3833,7 @@ exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone22"
+    data-focuszone-id="FocusZone27"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -3873,7 +3873,7 @@ exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip
             & path {
               display: none;
             }
-        id="xAxisGElementchart_21"
+        id="xAxisGElementchart_26"
         transform="translate(0, -35)"
       />
       <g
@@ -3901,7 +3901,7 @@ exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_21"
+        id="yAxisGElementchart_26"
         transform="translate(40, 0)"
       />
       <g />
@@ -3954,7 +3954,7 @@ exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone23"
+              data-focuszone-id="FocusZone28"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4180,7 +4180,7 @@ exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correc
         overflow: hidden;
         width: 100%;
       }
-  id="chart_26"
+  id="chart_32"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4193,7 +4193,7 @@ exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correc
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone27"
+    data-focuszone-id="FocusZone33"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -4233,7 +4233,7 @@ exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correc
             & path {
               display: none;
             }
-        id="xAxisGElementchart_26"
+        id="xAxisGElementchart_32"
         transform="translate(0, -35)"
       />
       <g
@@ -4261,7 +4261,7 @@ exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correc
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_26"
+        id="yAxisGElementchart_32"
         transform="translate(40, 0)"
       />
       <g />
@@ -4314,7 +4314,7 @@ exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correc
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone28"
+              data-focuszone-id="FocusZone34"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4540,7 +4540,7 @@ exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correc
         overflow: hidden;
         width: 100%;
       }
-  id="chart_36"
+  id="chart_44"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4553,7 +4553,7 @@ exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correc
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone37"
+    data-focuszone-id="FocusZone45"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -4593,7 +4593,7 @@ exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correc
             & path {
               display: none;
             }
-        id="xAxisGElementchart_36"
+        id="xAxisGElementchart_44"
         transform="translate(0, -35)"
       />
       <g
@@ -4621,7 +4621,7 @@ exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correc
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_36"
+        id="yAxisGElementchart_44"
         transform="translate(40, 0)"
       />
       <g />
@@ -4674,7 +4674,7 @@ exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correc
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone38"
+              data-focuszone-id="FocusZone46"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap
new file mode 100644
index 0000000000000..2701e910e20c2
--- /dev/null
+++ b/packages/react-charting/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChartRTL.test.tsx.snap
@@ -0,0 +1,5231 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Vertical stacked bar chart rendering Should re-render the Vertical stacked bar chart with data 1`] = `
+<div>
+  <div
+    aria-label="Graph has no data to display"
+    id="_VSBC_empty5"
+    role="alert"
+    style="opacity: 0;"
+  />
+</div>
+`;
+
+exports[`Vertical stacked bar chart rendering Should re-render the Vertical stacked bar chart with data 2`] = `
+<div>
+  <div
+    class=
+
+        {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          display: flex;
+          flex-direction: column;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
+          height: 100%;
+          overflow: hidden;
+          width: 100%;
+        }
+    id="chart_6"
+    role="presentation"
+  >
+    <div
+      class=
+          ms-FocusZone
+          &:focus {
+            outline: none;
+          }
+          {
+            overflow: auto;
+          }
+      data-focuszone-id="FocusZone7"
+    >
+      <svg
+        focusable="false"
+        height="0"
+        style="display: block;"
+        width="0"
+      >
+        <g
+          class=
+
+              & text {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                fill: #323130;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 10px;
+                font-weight: 600;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                fill: rgb(179, 179, 179);
+              }
+              & line {
+                opacity: 0.2;
+                stroke: #323130;
+                width: 1px;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+                opacity: 0.1;
+                stroke: rgb(179, 179, 179);
+              }
+              & path {
+                display: none;
+              }
+          id="xAxisGElementchart_6"
+          transform="translate(0, -35)"
+        />
+        <g
+          class=
+
+              & text {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                fill: #323130;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 10px;
+                font-weight: 600;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+                fill: rgb(179, 179, 179);
+              }
+              & path {
+                display: none;
+              }
+              & line {
+                opacity: 0.2;
+                stroke: #323130;
+              }
+              @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+                opacity: 0.1;
+                stroke: rgb(179, 179, 179);
+              }
+          id="yAxisGElementchart_6"
+          transform="translate(40, 0)"
+        />
+        <g />
+        <g />
+      </svg>
+    </div>
+    <div
+      class=
+
+          {
+            margin-left: 20px;
+            margin-top: 8px;
+          }
+    >
+      <div
+        class=
+
+            {
+              align-items: center;
+              margin-bottom: 0;
+              margin-left: -8px;
+              margin-right: 0;
+              margin-top: -8px;
+              white-space: nowrap;
+              width: 100%;
+            }
+      >
+        <div>
+          <div
+            style="position: relative;"
+          >
+            <div
+              data-automation-id="visibleContent"
+              style="position: fixed; visibility: hidden;"
+            >
+              <div
+                aria-label="Legends"
+                aria-multiselectable="false"
+                class=
+                    ms-FocusZone
+                    &:focus {
+                      outline: none;
+                    }
+                data-focuszone-id="FocusZone8"
+                role="listbox"
+              >
+                <div
+                  class=
+                      ms-OverflowSet
+                      {
+                        display: flex;
+                        flex-wrap: wrap;
+                        justify-content: unset;
+                        position: relative;
+                      }
+                  role="group"
+                >
+                  <div
+                    class=
+                        ms-OverflowSet-item
+                        {
+                          display: inherit;
+                          flex-shrink: 0;
+                        }
+                    role="none"
+                  >
+                    <button
+                      aria-label="Metadata1"
+                      aria-posinset="1"
+                      aria-selected="false"
+                      aria-setsize="2"
+                      class=
+
+                          {
+                            align-items: center;
+                            background: none;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            outline: transparent;
+                            padding-bottom: 8px;
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            padding-top: 8px;
+                            position: relative;
+                            text-transform: capitalize;
+                          }
+                          &::-moz-focus-inner {
+                            border: 0;
+                          }
+                          .ms-Fabric--isFocusVisible &:focus:after {
+                            border: 1px solid transparent;
+                            bottom: 1px;
+                            content: "";
+                            left: 1px;
+                            outline: 1px solid #605e5c;
+                            position: absolute;
+                            right: 1px;
+                            top: 1px;
+                            z-index: 1;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                            outline-color: #605e5c;
+                          }
+                      data-is-focusable="true"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class=
+
+                            {
+                              background-color: #0078d4;
+                              border-color: #0078d4;
+                              border: 1px solid;
+                              content: ;
+                              height: 12px;
+                              margin-right: 8px;
+                              width: 12px;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                              content: linear-gradient(to right, #0078d4, #0078d4);
+                              opacity: ;
+                            }
+                      />
+                      <div
+                        class=
+
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              color: #323130;
+                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                              font-size: 12px;
+                              font-weight: 400;
+                              line-height: 16px;
+                              opacity: ;
+                            }
+                      >
+                        Metadata1
+                      </div>
+                    </button>
+                  </div>
+                  <div
+                    class=
+                        ms-OverflowSet-item
+                        {
+                          display: inherit;
+                          flex-shrink: 0;
+                        }
+                    role="none"
+                  >
+                    <button
+                      aria-label="Metadata2"
+                      aria-posinset="2"
+                      aria-selected="false"
+                      aria-setsize="2"
+                      class=
+
+                          {
+                            align-items: center;
+                            background: none;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            outline: transparent;
+                            padding-bottom: 8px;
+                            padding-left: 8px;
+                            padding-right: 8px;
+                            padding-top: 8px;
+                            position: relative;
+                            text-transform: capitalize;
+                          }
+                          &::-moz-focus-inner {
+                            border: 0;
+                          }
+                          .ms-Fabric--isFocusVisible &:focus:after {
+                            border: 1px solid transparent;
+                            bottom: 1px;
+                            content: "";
+                            left: 1px;
+                            outline: 1px solid #605e5c;
+                            position: absolute;
+                            right: 1px;
+                            top: 1px;
+                            z-index: 1;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                            outline-color: #605e5c;
+                          }
+                      data-is-focusable="true"
+                      role="option"
+                      tabindex="-1"
+                    >
+                      <div
+                        class=
+
+                            {
+                              background-color: #00188f;
+                              border-color: #00188f;
+                              border: 1px solid;
+                              content: ;
+                              height: 12px;
+                              margin-right: 8px;
+                              width: 12px;
+                            }
+                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                              content: linear-gradient(to right, #00188f, #00188f);
+                              opacity: ;
+                            }
+                      />
+                      <div
+                        class=
+
+                            {
+                              -moz-osx-font-smoothing: grayscale;
+                              -webkit-font-smoothing: antialiased;
+                              color: #323130;
+                              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                              font-size: 12px;
+                              font-weight: 400;
+                              line-height: 16px;
+                              opacity: ;
+                            }
+                      >
+                        Metadata2
+                      </div>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <span
+      class="ms-layer"
+    />
+  </div>
+</div>
+`;
+
+exports[`VerticalStackedBarChart - mouse events Should render callout correctly on mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0false"
+        >
+          <g
+            id="0-singleBar"
+          >
+            <rect
+              aria-label="2020/04/30. Metadata1, 40%."
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              data-is-focusable={true}
+              fill="#0078d4"
+              height={196.15384615384616}
+              key="0"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              role="img"
+              transform="translate(0, 0)"
+              width={16}
+              x={48}
+              y={78.84615384615384}
+            />
+            <rect
+              aria-label="2020/04/30. Metadata2, 5%."
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              data-is-focusable={true}
+              fill="#00188f"
+              height={24.51923076923077}
+              key="1"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              role="img"
+              transform="translate(0, 0)"
+              width={16}
+              x={48}
+              y={54.326923076923066}
+            />
+          </g>
+          <text
+            aria-label="Total: 45"
+            className=
+
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            role="img"
+            textAnchor="middle"
+            transform="translate(0, 0)"
+            x={56}
+            y={48.326923076923066}
+          >
+            45
+          </text>
+        </g>
+        <g
+          key="1false"
+        >
+          <g
+            id="1-singleBar"
+          >
+            <rect
+              aria-label="2020/04/30. Metadata1, 30%."
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              data-is-focusable={true}
+              fill="#0078d4"
+              height={147.1153846153846}
+              key="1"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              role="img"
+              transform="translate(0, 0)"
+              width={16}
+              x={-44}
+              y={127.88461538461539}
+            />
+            <rect
+              aria-label="2020/04/30. Metadata2, 20%."
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              data-is-focusable={true}
+              fill="#00188f"
+              height={98.07692307692308}
+              key="2"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              role="img"
+              transform="translate(0, 0)"
+              width={16}
+              x={-44}
+              y={29.807692307692307}
+            />
+          </g>
+          <text
+            aria-label="Total: 50"
+            className=
+
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            role="img"
+            textAnchor="middle"
+            transform="translate(0, 0)"
+            x={-36}
+            y={23.807692307692307}
+          >
+            50
+          </text>
+        </g>
+      </g>
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div
+        aria-label="Legends"
+        aria-multiselectable={false}
+        className=
+            ms-FocusZone
+            &:focus {
+              outline: none;
+            }
+        data-focuszone-id="FocusZone5"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDownCapture={[Function]}
+        role="listbox"
+      >
+        <div
+          className=
+              ms-OverflowSet
+              {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: unset;
+                position: relative;
+              }
+          role="group"
+        >
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="0"
+            role="none"
+          >
+            <button
+              aria-label="Metadata1"
+              aria-posinset={1}
+              aria-selected={false}
+              aria-setsize={2}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #0078d4;
+                      border-color: #0078d4;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #0078d4, #0078d4);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                Metadata1
+              </div>
+            </button>
+          </div>
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="1"
+            role="none"
+          >
+            <button
+              aria-label="Metadata2"
+              aria-posinset={2}
+              aria-selected={false}
+              aria-setsize={2}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #00188f;
+                      border-color: #00188f;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #00188f, #00188f);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                Metadata2
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+      data-is-focusable={true}
+      hidden={false}
+      id="toolTipcallout0"
+      style={
+        Object {
+          "filter": "opacity(0)",
+          "opacity": 0,
+          "pointerEvents": "none",
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="text"
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div
+          className=
+
+              {
+                background-blend-mode: normal, luminosity;
+                background-color: #ffffff;
+                display: grid;
+                overflow: hidden;
+                padding-bottom: 10px;
+                padding-left: 16px;
+                padding-right: 16px;
+                padding-top: 11px;
+              }
+        >
+          <div
+            className=
+
+                {
+                  display: flex;
+                  flex-direction: row;
+                  justify-content: space-between;
+                }
+          >
+            <div
+              className=
+
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    color: #605e5c;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 12px;
+                    font-weight: 400;
+                    line-height: 16px;
+                    opacity: 0.8;
+                  }
+            >
+              2020/04/30
+               
+            </div>
+          </div>
+          <div
+            className=""
+          >
+            <div
+              className=
+
+                  {
+                    -moz-osx-font-smoothing: grayscale;
+                    -webkit-font-smoothing: antialiased;
+                    border-left: 4px solid #0078d4;
+                    color: #323130;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-size: 28px;
+                    font-weight: 600;
+                    line-height: 22px;
+                    margin-top: 13px;
+                    padding-left: 8px;
+                  }
+            >
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                    }
+              >
+                Metadata1
+              </div>
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #0078d4;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 28px;
+                      font-weight: bold;
+                      line-height: 36px;
+                    }
+              >
+                40%
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VerticalStackedBarChart - mouse events Should render customized callout on mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0false"
+        >
+          <g
+            id="0-singleBar"
+          >
+            <rect
+              aria-label="2020/04/30. Metadata1, 40%."
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              data-is-focusable={true}
+              fill="#0078d4"
+              height={196.15384615384616}
+              key="0"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              role="img"
+              transform="translate(0, 0)"
+              width={16}
+              x={48}
+              y={78.84615384615384}
+            />
+            <rect
+              aria-label="2020/04/30. Metadata2, 5%."
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              data-is-focusable={true}
+              fill="#00188f"
+              height={24.51923076923077}
+              key="1"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              role="img"
+              transform="translate(0, 0)"
+              width={16}
+              x={48}
+              y={54.326923076923066}
+            />
+          </g>
+          <text
+            aria-label="Total: 45"
+            className=
+
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            role="img"
+            textAnchor="middle"
+            transform="translate(0, 0)"
+            x={56}
+            y={48.326923076923066}
+          >
+            45
+          </text>
+        </g>
+        <g
+          key="1false"
+        >
+          <g
+            id="1-singleBar"
+          >
+            <rect
+              aria-label="2020/04/30. Metadata1, 30%."
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              data-is-focusable={true}
+              fill="#0078d4"
+              height={147.1153846153846}
+              key="1"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              role="img"
+              transform="translate(0, 0)"
+              width={16}
+              x={-44}
+              y={127.88461538461539}
+            />
+            <rect
+              aria-label="2020/04/30. Metadata2, 20%."
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              data-is-focusable={true}
+              fill="#00188f"
+              height={98.07692307692308}
+              key="2"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseMove={[Function]}
+              onMouseOver={[Function]}
+              role="img"
+              transform="translate(0, 0)"
+              width={16}
+              x={-44}
+              y={29.807692307692307}
+            />
+          </g>
+          <text
+            aria-label="Total: 50"
+            className=
+
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            role="img"
+            textAnchor="middle"
+            transform="translate(0, 0)"
+            x={-36}
+            y={23.807692307692307}
+          >
+            50
+          </text>
+        </g>
+      </g>
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div
+        aria-label="Legends"
+        aria-multiselectable={false}
+        className=
+            ms-FocusZone
+            &:focus {
+              outline: none;
+            }
+        data-focuszone-id="FocusZone5"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDownCapture={[Function]}
+        role="listbox"
+      >
+        <div
+          className=
+              ms-OverflowSet
+              {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: unset;
+                position: relative;
+              }
+          role="group"
+        >
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="0"
+            role="none"
+          >
+            <button
+              aria-label="Metadata1"
+              aria-posinset={1}
+              aria-selected={false}
+              aria-setsize={2}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #0078d4;
+                      border-color: #0078d4;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #0078d4, #0078d4);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                Metadata1
+              </div>
+            </button>
+          </div>
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="1"
+            role="none"
+          >
+            <button
+              aria-label="Metadata2"
+              aria-posinset={2}
+              aria-selected={false}
+              aria-setsize={2}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #00188f;
+                      border-color: #00188f;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #00188f, #00188f);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                Metadata2
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+      data-is-focusable={true}
+      hidden={false}
+      id="toolTipcallout0"
+      style={
+        Object {
+          "filter": "opacity(0)",
+          "opacity": 0,
+          "pointerEvents": "none",
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="text"
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div>
+          <pre>
+            {
+  "legend": "Metadata1",
+  "data": 40,
+  "color": "#0078d4",
+  "xAxisCalloutData": "2020/04/30",
+  "yAxisCalloutData": "40%"
+}
+          </pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VerticalStackedBarChart - mouse events Should render customized callout per stack on mouseover 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={310}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, 275)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g>
+        <g
+          key="0true"
+        >
+          <g
+            aria-label="0. Metadata1, 40%. Metadata2, 5%. Line1, 15."
+            data-is-focusable={true}
+            id="0-singleBar"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          >
+            <rect
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              fill="#0078d4"
+              height={196.15384615384616}
+              key="0"
+              transform="translate(0, 0)"
+              width={16}
+              x={48}
+              y={78.84615384615384}
+            />
+            <rect
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              fill="#00188f"
+              height={24.51923076923077}
+              key="1"
+              transform="translate(0, 0)"
+              width={16}
+              x={48}
+              y={54.326923076923066}
+            />
+          </g>
+          <text
+            aria-label="Total: 45"
+            className=
+
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            role="img"
+            textAnchor="middle"
+            transform="translate(0, 0)"
+            x={56}
+            y={48.326923076923066}
+          >
+            45
+          </text>
+        </g>
+        <g
+          key="1true"
+        >
+          <g
+            aria-label="20. Metadata1, 30%. Metadata2, 20%. Line1, 30."
+            data-is-focusable={true}
+            id="1-singleBar"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          >
+            <rect
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              fill="#0078d4"
+              height={147.1153846153846}
+              key="1"
+              transform="translate(0, 0)"
+              width={16}
+              x={-44}
+              y={127.88461538461539}
+            />
+            <rect
+              className=
+
+                  {
+                    cursor: default;
+                    opacity: ;
+                  }
+              fill="#00188f"
+              height={98.07692307692308}
+              key="2"
+              transform="translate(0, 0)"
+              width={16}
+              x={-44}
+              y={29.807692307692307}
+            />
+          </g>
+          <text
+            aria-label="Total: 50"
+            className=
+
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            role="img"
+            textAnchor="middle"
+            transform="translate(0, 0)"
+            x={-36}
+            y={23.807692307692307}
+          >
+            50
+          </text>
+        </g>
+      </g>
+      <g>
+        <line
+          key="0-1-line"
+          opacity={1}
+          stroke="#ffb900"
+          strokeLinecap="round"
+          strokeWidth={3}
+          transform="translate(0, 0)"
+          x1={56}
+          x2={-36}
+          y1={201.4423076923077}
+          y2={127.88461538461539}
+        />
+        <circle
+          cx={56}
+          cy={201.4423076923077}
+          fill="#ffffff"
+          key="0-0-dot"
+          onMouseOver={[Function]}
+          r={8}
+          stroke="#ffb900"
+          strokeWidth={3}
+          transform="translate(0, 0)"
+          visibility="visibility"
+        />
+        <circle
+          cx={-36}
+          cy={127.88461538461539}
+          fill="#ffffff"
+          key="0-1-dot"
+          onMouseOver={[Function]}
+          r={8}
+          stroke="#ffb900"
+          strokeWidth={3}
+          transform="translate(0, 0)"
+          visibility="hidden"
+        />
+      </g>
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div
+        aria-label="Legends"
+        aria-multiselectable={false}
+        className=
+            ms-FocusZone
+            &:focus {
+              outline: none;
+            }
+        data-focuszone-id="FocusZone5"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDownCapture={[Function]}
+        role="listbox"
+      >
+        <div
+          className=
+              ms-OverflowSet
+              {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: unset;
+                position: relative;
+              }
+          role="group"
+        >
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="0"
+            role="none"
+          >
+            <button
+              aria-label="Line1"
+              aria-posinset={1}
+              aria-selected={false}
+              aria-setsize={3}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #ffb900;
+                      border-color: #ffb900;
+                      border: 1px solid;
+                      content: ;
+                      height: 4px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #ffb900, #ffb900);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                Line1
+              </div>
+            </button>
+          </div>
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="1"
+            role="none"
+          >
+            <button
+              aria-label="Metadata1"
+              aria-posinset={2}
+              aria-selected={false}
+              aria-setsize={3}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #0078d4;
+                      border-color: #0078d4;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #0078d4, #0078d4);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                Metadata1
+              </div>
+            </button>
+          </div>
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            key="2"
+            role="none"
+          >
+            <button
+              aria-label="Metadata2"
+              aria-posinset={3}
+              aria-selected={false}
+              aria-setsize={3}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #00188f;
+                      border-color: #00188f;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #00188f, #00188f);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                Metadata2
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    className=
+        ms-Callout-container
+        {
+          position: relative;
+        }
+  >
+    <div
+      className=
+          ms-Callout
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            border-radius: 2px;
+            box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+            box-sizing: border-box;
+            display: flex;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
+            outline: transparent;
+            position: absolute;
+            z-index: 1000000;
+          }
+          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+            border-color: WindowText;
+            border-style: solid;
+            border-width: 1px;
+          }
+          &::-moz-focus-inner {
+            border: 0px;
+          }
+      data-is-focusable={true}
+      hidden={false}
+      id="toolTipcallout0"
+      style={
+        Object {
+          "filter": "opacity(0)",
+          "opacity": 0,
+          "pointerEvents": "none",
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className=
+            ms-Callout-main
+            {
+              background-color: #ffffff;
+              border-radius: 2px;
+              overflow-x: hidden;
+              overflow-y: auto;
+              position: relative;
+              width: 100%;
+            }
+        onKeyDown={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
+        role="text"
+        style={
+          Object {
+            "maxHeight": "100%",
+            "outline": "none",
+            "overflowY": undefined,
+          }
+        }
+      >
+        <div>
+          <pre>
+            {
+  "chartData": [
+    {
+      "legend": "Metadata1",
+      "data": 40,
+      "color": "#0078d4",
+      "xAxisCalloutData": "2020/04/30",
+      "yAxisCalloutData": "40%"
+    },
+    {
+      "legend": "Metadata2",
+      "data": 5,
+      "color": "#00188f",
+      "xAxisCalloutData": "2020/04/30",
+      "yAxisCalloutData": "5%"
+    }
+  ],
+  "xAxisPoint": 0,
+  "lineData": [
+    {
+      "y": 15,
+      "legend": "Line1",
+      "color": "#ffb900",
+      "data": 15,
+      "shouldDrawBorderBottom": true
+    }
+  ]
+}
+          </pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_50"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone51"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_50"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_50"
+        transform="translate(40, 0)"
+      />
+      <g />
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone52"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata2
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChart correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_3"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone4"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_3"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_3"
+        transform="translate(40, 0)"
+      />
+      <g />
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone5"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata2
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLines correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_20"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone21"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_20"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_20"
+        transform="translate(40, 0)"
+      />
+      <g />
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div
+        aria-label="Legends"
+        aria-multiselectable={false}
+        className=
+            ms-FocusZone
+            &:focus {
+              outline: none;
+            }
+        data-focuszone-id="FocusZone22"
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onMouseDownCapture={[Function]}
+        role="listbox"
+      >
+        <div
+          className=
+              ms-OverflowSet
+              {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: unset;
+                position: relative;
+              }
+          role="group"
+        >
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            role="none"
+          >
+            <button
+              aria-label="Metadata1"
+              aria-posinset={1}
+              aria-selected={false}
+              aria-setsize={2}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #0078d4;
+                      border-color: #0078d4;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #0078d4, #0078d4);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                Metadata1
+              </div>
+            </button>
+          </div>
+          <div
+            className=
+                ms-OverflowSet-item
+                {
+                  display: inherit;
+                  flex-shrink: 0;
+                }
+            role="none"
+          >
+            <button
+              aria-label="Metadata2"
+              aria-posinset={2}
+              aria-selected={false}
+              aria-setsize={2}
+              className=
+
+                  {
+                    align-items: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    display: flex;
+                    outline: transparent;
+                    padding-bottom: 8px;
+                    padding-left: 8px;
+                    padding-right: 8px;
+                    padding-top: 8px;
+                    position: relative;
+                    text-transform: capitalize;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+                  .ms-Fabric--isFocusVisible &:focus:after {
+                    border: 1px solid transparent;
+                    bottom: 1px;
+                    content: "";
+                    left: 1px;
+                    outline: 1px solid #605e5c;
+                    position: absolute;
+                    right: 1px;
+                    top: 1px;
+                    z-index: 1;
+                  }
+                  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                    outline-color: #605e5c;
+                  }
+              data-is-focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseOut={[Function]}
+              onMouseOver={[Function]}
+              role="option"
+            >
+              <div
+                className=
+
+                    {
+                      background-color: #00188f;
+                      border-color: #00188f;
+                      border: 1px solid;
+                      content: ;
+                      height: 12px;
+                      margin-right: 8px;
+                      width: 12px;
+                    }
+                    @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                      content: linear-gradient(to right, #00188f, #00188f);
+                      opacity: ;
+                    }
+              />
+              <div
+                className=
+
+                    {
+                      -moz-osx-font-smoothing: grayscale;
+                      -webkit-font-smoothing: antialiased;
+                      color: #323130;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-size: 12px;
+                      font-weight: 400;
+                      line-height: 16px;
+                      opacity: ;
+                    }
+              >
+                Metadata2
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_9"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone10"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_9"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_9"
+        transform="translate(40, 0)"
+      />
+      <g />
+      <g />
+    </svg>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_14"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone15"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_14"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_14"
+        transform="translate(40, 0)"
+      />
+      <g />
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone16"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata2
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing renders isCalloutForStack correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_38"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone39"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_38"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_38"
+        transform="translate(40, 0)"
+      />
+      <g />
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone40"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata2
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_26"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone27"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_26"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_26"
+        transform="translate(40, 0)"
+      />
+      <g />
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone28"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata2
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_32"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone33"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_32"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_32"
+        transform="translate(40, 0)"
+      />
+      <g />
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone34"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata2
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;
+
+exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correctly 1`] = `
+<div
+  className=
+
+      {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: flex;
+        flex-direction: column;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+  id="chart_44"
+  onMouseLeave={[Function]}
+  role="presentation"
+>
+  <div
+    className=
+        ms-FocusZone
+        &:focus {
+          outline: none;
+        }
+        {
+          overflow: auto;
+        }
+    data-focuszone-id="FocusZone45"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDownCapture={[Function]}
+  >
+    <svg
+      height={0}
+      style={
+        Object {
+          "display": "block",
+        }
+      }
+      width={0}
+    >
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+              width: 1px;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+        id="xAxisGElementchart_44"
+        transform="translate(0, -35)"
+      />
+      <g
+        className=
+
+            & text {
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+              fill: #323130;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-size: 10px;
+              font-weight: 600;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& text {
+              fill: rgb(179, 179, 179);
+            }
+            & path {
+              display: none;
+            }
+            & line {
+              opacity: 0.2;
+              stroke: #323130;
+            }
+            @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& line {
+              opacity: 0.1;
+              stroke: rgb(179, 179, 179);
+            }
+        id="yAxisGElementchart_44"
+        transform="translate(40, 0)"
+      />
+      <g />
+      <g />
+    </svg>
+  </div>
+  <div
+    className=
+
+        {
+          margin-left: 20px;
+          margin-top: 8px;
+        }
+  >
+    <div
+      className=
+
+          {
+            align-items: center;
+            margin-bottom: 0;
+            margin-left: -8px;
+            margin-right: 0;
+            margin-top: -8px;
+            white-space: nowrap;
+            width: 100%;
+          }
+    >
+      <div>
+        <div
+          style={
+            Object {
+              "position": "relative",
+            }
+          }
+        >
+          <div
+            data-automation-id="visibleContent"
+            style={
+              Object {
+                "position": "fixed",
+                "visibility": "hidden",
+              }
+            }
+          >
+            <div
+              aria-label="Legends"
+              aria-multiselectable={false}
+              className=
+                  ms-FocusZone
+                  &:focus {
+                    outline: none;
+                  }
+              data-focuszone-id="FocusZone46"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onMouseDownCapture={[Function]}
+              role="listbox"
+            >
+              <div
+                className=
+                    ms-OverflowSet
+                    {
+                      display: flex;
+                      flex-wrap: wrap;
+                      justify-content: unset;
+                      position: relative;
+                    }
+                role="group"
+              >
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata1"
+                    aria-posinset={1}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #0078d4;
+                            border-color: #0078d4;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #0078d4, #0078d4);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata1
+                    </div>
+                  </button>
+                </div>
+                <div
+                  className=
+                      ms-OverflowSet-item
+                      {
+                        display: inherit;
+                        flex-shrink: 0;
+                      }
+                  role="none"
+                >
+                  <button
+                    aria-label="Metadata2"
+                    aria-posinset={2}
+                    aria-selected={false}
+                    aria-setsize={2}
+                    className=
+
+                        {
+                          align-items: center;
+                          background: none;
+                          border: none;
+                          cursor: pointer;
+                          display: flex;
+                          outline: transparent;
+                          padding-bottom: 8px;
+                          padding-left: 8px;
+                          padding-right: 8px;
+                          padding-top: 8px;
+                          position: relative;
+                          text-transform: capitalize;
+                        }
+                        &::-moz-focus-inner {
+                          border: 0;
+                        }
+                        .ms-Fabric--isFocusVisible &:focus:after {
+                          border: 1px solid transparent;
+                          bottom: 1px;
+                          content: "";
+                          left: 1px;
+                          outline: 1px solid #605e5c;
+                          position: absolute;
+                          right: 1px;
+                          top: 1px;
+                          z-index: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
+                          outline-color: #605e5c;
+                        }
+                    data-is-focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                    role="option"
+                  >
+                    <div
+                      className=
+
+                          {
+                            background-color: #00188f;
+                            border-color: #00188f;
+                            border: 1px solid;
+                            content: ;
+                            height: 12px;
+                            margin-right: 8px;
+                            width: 12px;
+                          }
+                          @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
+                            content: linear-gradient(to right, #00188f, #00188f);
+                            opacity: ;
+                          }
+                    />
+                    <div
+                      className=
+
+                          {
+                            -moz-osx-font-smoothing: grayscale;
+                            -webkit-font-smoothing: antialiased;
+                            color: #323130;
+                            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                            font-size: 12px;
+                            font-weight: 400;
+                            line-height: 16px;
+                            opacity: ;
+                          }
+                    >
+                      Metadata2
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <span
+    className="ms-layer"
+  />
+</div>
+`;