diff --git a/change/@fluentui-react-charting-bda51650-008f-417c-ab0d-62e7dd4a22fd.json b/change/@fluentui-react-charting-bda51650-008f-417c-ab0d-62e7dd4a22fd.json
new file mode 100644
index 00000000000000..0614b57ddd3fde
--- /dev/null
+++ b/change/@fluentui-react-charting-bda51650-008f-417c-ab0d-62e7dd4a22fd.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Improving first render cycle of cartesian chart",
+  "packageName": "@fluentui/react-charting",
+  "email": "ankityadav@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 5b6d4bbe68707c..c2fde62eba04f1 100644
--- a/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
+++ b/packages/react-charting/src/components/AreaChart/AreaChart.base.tsx
@@ -106,6 +106,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
   //enableComputationOptimization is used for optimized code to group data points by x value
   //from O(n^2) to O(n) using a map.
   private _enableComputationOptimization: boolean;
+  private _firstRenderOptimization: boolean;
 
   public constructor(props: IAreaChartProps) {
     super(props);
@@ -144,6 +145,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
     this._rectId = getId('rectangle');
     this._tooltipId = getId('AreaChartTooltipID');
     this._enableComputationOptimization = true;
+    this._firstRenderOptimization = true;
   }
 
   public componentDidUpdate() {
@@ -203,6 +205,7 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
           getmargins={this._getMargins}
           customizedCallout={this._getCustomizedCallout()}
           onChartMouseLeave={this._handleChartMouseLeave}
+          enableFirstRenderOptimization={this.props.enablePerfOptimization && this._firstRenderOptimization}
           /* eslint-disable react/jsx-no-bind */
           // eslint-disable-next-line react/no-children-prop
           children={(props: IChildProps) => {
diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx
index 11ed79e424f940..fb0894f66dd8e6 100644
--- a/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx
+++ b/packages/react-charting/src/components/AreaChart/AreaChart.test.tsx
@@ -1,7 +1,6 @@
 jest.mock('react-dom');
 import * as React from 'react';
 import { resetIds } from '../../Utilities';
-import * as renderer from 'react-test-renderer';
 import { mount, ReactWrapper } from 'enzyme';
 import { IAreaChartProps, AreaChart } from './index';
 import { IAreaChartState, AreaChartBase } from './AreaChart.base';
@@ -10,9 +9,15 @@ import toJson from 'enzyme-to-json';
 
 // Wrapper of the AreaChart to be tested.
 let wrapper: ReactWrapper<IAreaChartProps, IAreaChartState, AreaChartBase> | undefined;
+const originalRAF = window.requestAnimationFrame;
 
 function sharedBeforeEach() {
   resetIds();
+  jest.useFakeTimers();
+  Object.defineProperty(window, 'requestAnimationFrame', {
+    writable: true,
+    value: (callback: FrameRequestCallback) => callback(0),
+  });
 }
 
 function sharedAfterEach() {
@@ -27,6 +32,8 @@ function sharedAfterEach() {
   if ((global.setTimeout as any).mock) {
     jest.useRealTimers();
   }
+  jest.useRealTimers();
+  window.requestAnimationFrame = originalRAF;
 }
 
 const points: ILineChartPoints[] = [
@@ -69,68 +76,118 @@ const emptyChartPoints = {
 };
 
 describe('AreaChart snapShot testing', () => {
-  it('renders Areachart correctly', () => {
-    const component = renderer.create(<AreaChart data={chartPoints} />);
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
+  beforeEach(() => {
+    resetIds();
   });
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount();
+      wrapper = undefined;
+    }
 
-  it('renders hideLegend hhh correctly', () => {
-    const component = renderer.create(<AreaChart data={chartPoints} hideLegend={true} />);
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
+    // Do this after unmounting the wrapper to make sure if any timers cleaned up on unmount are
+    // cleaned up in fake timers world
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if ((global.setTimeout as any).mock) {
+      jest.useRealTimers();
+    }
   });
 
-  it('renders hideTooltip correctly', () => {
-    const component = renderer.create(<AreaChart data={chartPoints} hideTooltip={true} />);
-    const tree = component.toJSON();
+  it('renders Areachart correctly', async () => {
+    wrapper = mount(<AreaChart data={chartPoints} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders enabledLegendsWrapLines correctly', () => {
-    const component = renderer.create(<AreaChart data={chartPoints} enabledLegendsWrapLines={true} />);
-    const tree = component.toJSON();
+  it('renders hideLegend hhh correctly', async () => {
+    wrapper = mount(<AreaChart data={chartPoints} hideLegend={true} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders showXAxisLablesTooltip correctly', () => {
-    const component = renderer.create(<AreaChart data={chartPoints} showXAxisLablesTooltip={true} />);
-    const tree = component.toJSON();
+  it('renders hideTooltip correctly', async () => {
+    wrapper = mount(<AreaChart data={chartPoints} hideTooltip={true} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders wrapXAxisLables correctly', () => {
-    const component = renderer.create(<AreaChart data={chartPoints} wrapXAxisLables={true} />);
-    const tree = component.toJSON();
+  it('renders enabledLegendsWrapLines correctly', async () => {
+    wrapper = mount(<AreaChart data={chartPoints} enabledLegendsWrapLines={true} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
-
-  it('renders yAxisTickFormat correctly', () => {
-    const component = renderer.create(<AreaChart data={chartPoints} yAxisTickFormat={'/%d'} />);
-    const tree = component.toJSON();
+  it('renders yAxisTickFormat correctly', async () => {
+    wrapper = mount(<AreaChart data={chartPoints} yAxisTickFormat={'/%d'} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders Areachart with single point correctly', () => {
-    const component = renderer.create(<AreaChart data={singleChartPoint} />);
-    const tree = component.toJSON();
+  it('renders Areachart with single point correctly', async () => {
+    wrapper = mount(<AreaChart data={singleChartPoint} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 
-  it('Should render with default colors when line color is not provided', () => {
+  it('Should render with default colors when line color is not provided', async () => {
     const lineColor = points[0].color;
     delete points[0].color;
 
-    const component = renderer.create(<AreaChart data={chartPoints} />);
-    const tree = component.toJSON();
+    wrapper = mount(<AreaChart data={chartPoints} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
 
     points[0].color = lineColor;
   });
 
-  it('Should not render circles when optimizeLargeData is true', () => {
-    const component = renderer.create(<AreaChart data={chartPoints} optimizeLargeData />);
-    const tree = component.toJSON();
+  it('Should not render circles when optimizeLargeData is true', async () => {
+    wrapper = mount(<AreaChart data={chartPoints} optimizeLargeData />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders showXAxisLablesTooltip correctly', async () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+    wrapper = mount(<AreaChart data={chartPoints} showXAxisLablesTooltip={true} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    if (wrapper) {
+      const tree = toJson(wrapper, { mode: 'deep' });
+      expect(tree).toMatchSnapshot();
+    }
+  });
+
+  it('renders wrapXAxisLables correctly', async () => {
+    const mockGetComputedTextLength = jest.fn().mockReturnValue(100);
+
+    // Replace the original method with the mock implementation
+    Object.defineProperty(
+      Object.getPrototypeOf(document.createElementNS('http://www.w3.org/2000/svg', 'tspan')),
+      'getComputedTextLength',
+      {
+        value: mockGetComputedTextLength,
+      },
+    );
+    wrapper = mount(<AreaChart data={chartPoints} wrapXAxisLables={true} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper!, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 });
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 cbfdec4c2a65b3..adc1d00ad35b35 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
@@ -36,7 +36,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
   >
     <svg
       aria-label="AreaChart"
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -71,7 +71,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
               display: none;
             }
         id="xAxisGElementchart_5"
-        transform="translate(0, -35)"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -104,7 +104,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
       <g>
         <rect
           fill="transparent"
-          height={-20}
+          height={290}
           id="rectangle3"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
@@ -114,7 +114,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
       </g>
       <g>
         <path
-          d="M40,-0.625L-20,20"
+          d="M40,115.625L-20,20"
           fill="transparent"
           id="0-line-areaChart_0"
           onMouseMove={[Function]}
@@ -125,7 +125,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
           strokeWidth={3}
         />
         <path
-          d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
           fill="red"
           fillOpacity={0.7}
           id="0-graph-areaChart_0"
@@ -136,13 +136,13 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
         />
         <g
           clipPath="url(#clip)"
-          d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
           key="0-dots-areaChart_0"
         >
           <circle
             aria-label="20. metaData1, 50."
             cx={40}
-            cy={-0.625}
+            cy={115.625}
             data-is-focusable={true}
             fill="red"
             id="circle2_0"
@@ -187,7 +187,7 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
           x1={-20}
           x2={-20}
           y1={0}
-          y2={0}
+          y2={310}
         />
       </g>
     </svg>
@@ -223,12 +223,6 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
         >
           <div
             data-automation-id="visibleContent"
-            style={
-              Object {
-                "position": "fixed",
-                "visibility": "hidden",
-              }
-            }
           >
             <div
               aria-label="Legends"
@@ -385,14 +379,20 @@ exports[`AreaChart - mouse events Should render callout correctly on mouseover 1
           &::-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 {
-          "filter": "opacity(0)",
-          "opacity": 0,
-          "pointerEvents": "none",
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
         }
       }
       tabIndex={-1}
@@ -578,7 +578,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
   >
     <svg
       aria-label="AreaChart"
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -613,7 +613,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
               display: none;
             }
         id="xAxisGElementchart_5"
-        transform="translate(0, -35)"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -646,7 +646,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
       <g>
         <rect
           fill="transparent"
-          height={-20}
+          height={290}
           id="rectangle3"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
@@ -656,7 +656,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
       </g>
       <g>
         <path
-          d="M40,-0.625L-20,20"
+          d="M40,115.625L-20,20"
           fill="transparent"
           id="0-line-areaChart_0"
           onMouseMove={[Function]}
@@ -667,7 +667,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
           strokeWidth={3}
         />
         <path
-          d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
           fill="red"
           fillOpacity={0.7}
           id="0-graph-areaChart_0"
@@ -678,13 +678,13 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
         />
         <g
           clipPath="url(#clip)"
-          d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
           key="0-dots-areaChart_0"
         >
           <circle
             aria-label="20. metaData1, 50."
             cx={40}
-            cy={-0.625}
+            cy={115.625}
             data-is-focusable={true}
             fill="red"
             id="circle2_0"
@@ -729,7 +729,7 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
           x1={-20}
           x2={-20}
           y1={0}
-          y2={0}
+          y2={310}
         />
       </g>
     </svg>
@@ -765,12 +765,6 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
         >
           <div
             data-automation-id="visibleContent"
-            style={
-              Object {
-                "position": "fixed",
-                "visibility": "hidden",
-              }
-            }
           >
             <div
               aria-label="Legends"
@@ -927,14 +921,20 @@ exports[`AreaChart - mouse events Should render customized callout on mouseover
           &::-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 {
-          "filter": "opacity(0)",
-          "opacity": 0,
-          "pointerEvents": "none",
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
         }
       }
       tabIndex={-1}
@@ -1017,7 +1017,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
   >
     <svg
       aria-label="AreaChart"
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -1052,7 +1052,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
               display: none;
             }
         id="xAxisGElementchart_5"
-        transform="translate(0, -35)"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -1085,7 +1085,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
       <g>
         <rect
           fill="transparent"
-          height={-20}
+          height={290}
           id="rectangle3"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
@@ -1095,7 +1095,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
       </g>
       <g>
         <path
-          d="M40,-0.625L-20,20"
+          d="M40,115.625L-20,20"
           fill="transparent"
           id="0-line-areaChart_0"
           onMouseMove={[Function]}
@@ -1106,7 +1106,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
           strokeWidth={3}
         />
         <path
-          d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
           fill="red"
           fillOpacity={0.7}
           id="0-graph-areaChart_0"
@@ -1117,13 +1117,13 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
         />
         <g
           clipPath="url(#clip)"
-          d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
           key="0-dots-areaChart_0"
         >
           <circle
             aria-label="20. metaData1, 50."
             cx={40}
-            cy={-0.625}
+            cy={115.625}
             data-is-focusable={true}
             fill="red"
             id="circle2_0"
@@ -1168,7 +1168,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
           x1={-20}
           x2={-20}
           y1={0}
-          y2={0}
+          y2={310}
         />
       </g>
     </svg>
@@ -1204,12 +1204,6 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
         >
           <div
             data-automation-id="visibleContent"
-            style={
-              Object {
-                "position": "fixed",
-                "visibility": "hidden",
-              }
-            }
           >
             <div
               aria-label="Legends"
@@ -1366,14 +1360,20 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
           &::-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 {
-          "filter": "opacity(0)",
-          "opacity": 0,
-          "pointerEvents": "none",
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
         }
       }
       tabIndex={-1}
@@ -1436,7 +1436,7 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
         overflow: hidden;
         width: 100%;
       }
-  id="chart_76"
+  id="chart_5"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1449,14 +1449,14 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone77"
+    data-focuszone-id="FocusZone6"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       aria-label="AreaChart"
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -1490,8 +1490,8 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
             & path {
               display: none;
             }
-        id="xAxisGElementchart_76"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_5"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -1518,14 +1518,14 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_76"
+        id="yAxisGElementchart_5"
         transform="translate(40, 0)"
       />
       <g>
         <rect
           fill="transparent"
-          height={-20}
-          id="rectangle74"
+          height={290}
+          id="rectangle3"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -1534,9 +1534,9 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
       </g>
       <g>
         <path
-          d="M40,-0.625L-20,20"
+          d="M40,115.625L-20,20"
           fill="transparent"
-          id="0-line-areaChart_71"
+          id="0-line-areaChart_0"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -1546,11 +1546,11 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
         />
         <path
           aria-label="metaData1, series 1 of 1 with 2 data points."
-          d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
           data-is-focusable={true}
           fill="red"
           fillOpacity={0.7}
-          id="0-graph-areaChart_71"
+          id="0-graph-areaChart_0"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -1558,7 +1558,8 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
           role="img"
         />
         <line
-          id="verticalLine_72"
+          id="verticalLine_1"
+          key="verticalLine_1"
           opacity={0.5}
           strokeDasharray={5.5}
           strokeWidth={1}
@@ -1566,7 +1567,7 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
           x1={0}
           x2={0}
           y1={0}
-          y2={0}
+          y2={310}
         />
       </g>
     </svg>
@@ -1617,7 +1618,7 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone78"
+              data-focuszone-id="FocusZone7"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1641,6 +1642,7 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -1753,7 +1755,7 @@ exports[`AreaChart snapShot testing Should render with default colors when line
         overflow: hidden;
         width: 100%;
       }
-  id="chart_68"
+  id="chart_5"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1766,14 +1768,14 @@ exports[`AreaChart snapShot testing Should render with default colors when line
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone69"
+    data-focuszone-id="FocusZone6"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       aria-label="AreaChart"
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -1807,8 +1809,8 @@ exports[`AreaChart snapShot testing Should render with default colors when line
             & path {
               display: none;
             }
-        id="xAxisGElementchart_68"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_5"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -1835,14 +1837,14 @@ exports[`AreaChart snapShot testing Should render with default colors when line
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_68"
+        id="yAxisGElementchart_5"
         transform="translate(40, 0)"
       />
       <g>
         <rect
           fill="transparent"
-          height={-20}
-          id="rectangle66"
+          height={290}
+          id="rectangle3"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -1851,9 +1853,9 @@ exports[`AreaChart snapShot testing Should render with default colors when line
       </g>
       <g>
         <path
-          d="M40,-0.625L-20,20"
+          d="M40,115.625L-20,20"
           fill="transparent"
-          id="0-line-areaChart_63"
+          id="0-line-areaChart_0"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -1862,10 +1864,10 @@ exports[`AreaChart snapShot testing Should render with default colors when line
           strokeWidth={3}
         />
         <path
-          d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
           fill="#637cef"
           fillOpacity={0.7}
-          id="0-graph-areaChart_63"
+          id="0-graph-areaChart_0"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -1873,15 +1875,17 @@ exports[`AreaChart snapShot testing Should render with default colors when line
         />
         <g
           clipPath="url(#clip)"
-          d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
         >
           <circle
             aria-label="20. metaData1, 50."
             cx={40}
-            cy={-0.625}
+            cy={115.625}
             data-is-focusable={true}
             fill="#637cef"
-            id="circle65_0"
+            id="circle2_0"
+            key="circle2_0"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1898,7 +1902,8 @@ exports[`AreaChart snapShot testing Should render with default colors when line
             cy={20}
             data-is-focusable={true}
             fill="#637cef"
-            id="circle65_1"
+            id="circle2_1"
+            key="circle2_1"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1911,7 +1916,8 @@ exports[`AreaChart snapShot testing Should render with default colors when line
           />
         </g>
         <line
-          id="verticalLine_64"
+          id="verticalLine_1"
+          key="verticalLine_1"
           opacity={0.5}
           stroke="#637cef"
           strokeDasharray={5.5}
@@ -1920,7 +1926,7 @@ exports[`AreaChart snapShot testing Should render with default colors when line
           x1={0}
           x2={0}
           y1={0}
-          y2={0}
+          y2={310}
         />
       </g>
     </svg>
@@ -1971,7 +1977,7 @@ exports[`AreaChart snapShot testing Should render with default colors when line
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone70"
+              data-focuszone-id="FocusZone7"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1995,6 +2001,7 @@ exports[`AreaChart snapShot testing Should render with default colors when line
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -2127,7 +2134,7 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
   >
     <svg
       aria-label="AreaChart"
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -2162,7 +2169,7 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
               display: none;
             }
         id="xAxisGElementchart_5"
-        transform="translate(0, -35)"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -2195,7 +2202,7 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
       <g>
         <rect
           fill="transparent"
-          height={-20}
+          height={290}
           id="rectangle3"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
@@ -2205,7 +2212,7 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
       </g>
       <g>
         <path
-          d="M40,-0.625L-20,20"
+          d="M40,115.625L-20,20"
           fill="transparent"
           id="0-line-areaChart_0"
           onMouseMove={[Function]}
@@ -2216,7 +2223,7 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
           strokeWidth={3}
         />
         <path
-          d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
           fill="red"
           fillOpacity={0.7}
           id="0-graph-areaChart_0"
@@ -2227,15 +2234,17 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
         />
         <g
           clipPath="url(#clip)"
-          d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
         >
           <circle
             aria-label="20. metaData1, 50."
             cx={40}
-            cy={-0.625}
+            cy={115.625}
             data-is-focusable={true}
             fill="red"
             id="circle2_0"
+            key="circle2_0"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -2253,6 +2262,7 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
             data-is-focusable={true}
             fill="red"
             id="circle2_1"
+            key="circle2_1"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -2266,6 +2276,7 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
         </g>
         <line
           id="verticalLine_1"
+          key="verticalLine_1"
           opacity={0.5}
           stroke="red"
           strokeDasharray={5.5}
@@ -2274,7 +2285,7 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
           x1={0}
           x2={0}
           y1={0}
-          y2={0}
+          y2={310}
         />
       </g>
     </svg>
@@ -2349,6 +2360,7 @@ exports[`AreaChart snapShot testing renders Areachart correctly 1`] = `
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -2461,7 +2473,7 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
         overflow: hidden;
         width: 100%;
       }
-  id="chart_60"
+  id="chart_5"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2474,14 +2486,14 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone61"
+    data-focuszone-id="FocusZone6"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       aria-label="AreaChart"
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -2515,8 +2527,8 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
             & path {
               display: none;
             }
-        id="xAxisGElementchart_60"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_5"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -2543,14 +2555,14 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_60"
+        id="yAxisGElementchart_5"
         transform="translate(40, 0)"
       />
       <g>
         <rect
           fill="transparent"
-          height={-20}
-          id="rectangle58"
+          height={290}
+          id="rectangle3"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -2559,9 +2571,9 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
       </g>
       <g>
         <path
-          d="M10,17.885Z"
+          d="M10,29.808Z"
           fill="transparent"
-          id="0-line-areaChart_55"
+          id="0-line-areaChart_0"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -2571,10 +2583,10 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
         />
         <circle
           cx={10}
-          cy={17.884615384615383}
+          cy={29.8076923076923}
           fill="red"
           fillOpacity={0.7}
-          id="0-graph-areaChart_55"
+          id="0-graph-areaChart_0"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -2585,15 +2597,17 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
         />
         <g
           clipPath="url(#clip)"
-          d="M10,17.885L10,-35Z"
+          d="M10,29.808L10,275Z"
+          key="0-dots-areaChart_0"
         >
           <circle
             aria-label="20. metaData1, 50."
             cx={10}
-            cy={17.884615384615383}
+            cy={29.8076923076923}
             data-is-focusable={true}
             fill="red"
-            id="circle57_0"
+            id="circle2_0"
+            key="circle2_0"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -2606,7 +2620,8 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
           />
         </g>
         <line
-          id="verticalLine_56"
+          id="verticalLine_1"
+          key="verticalLine_1"
           opacity={0.5}
           stroke="red"
           strokeDasharray={5.5}
@@ -2615,7 +2630,7 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
           x1={0}
           x2={0}
           y1={0}
-          y2={0}
+          y2={310}
         />
       </g>
     </svg>
@@ -2666,7 +2681,7 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone62"
+              data-focuszone-id="FocusZone7"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2690,6 +2705,7 @@ exports[`AreaChart snapShot testing renders Areachart with single point correctl
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -2802,7 +2818,7 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
         overflow: hidden;
         width: 100%;
       }
-  id="chart_28"
+  id="chart_5"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2815,14 +2831,14 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone29"
+    data-focuszone-id="FocusZone6"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       aria-label="AreaChart"
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -2856,8 +2872,8 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
             & path {
               display: none;
             }
-        id="xAxisGElementchart_28"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_5"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -2884,14 +2900,14 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_28"
+        id="yAxisGElementchart_5"
         transform="translate(40, 0)"
       />
       <g>
         <rect
           fill="transparent"
-          height={-20}
-          id="rectangle26"
+          height={290}
+          id="rectangle3"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -2900,9 +2916,9 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
       </g>
       <g>
         <path
-          d="M40,-0.625L-20,20"
+          d="M40,115.625L-20,20"
           fill="transparent"
-          id="0-line-areaChart_23"
+          id="0-line-areaChart_0"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -2911,10 +2927,10 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
           strokeWidth={3}
         />
         <path
-          d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
           fill="red"
           fillOpacity={0.7}
-          id="0-graph-areaChart_23"
+          id="0-graph-areaChart_0"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -2922,15 +2938,17 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
         />
         <g
           clipPath="url(#clip)"
-          d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
         >
           <circle
             aria-label="20. metaData1, 50."
             cx={40}
-            cy={-0.625}
+            cy={115.625}
             data-is-focusable={true}
             fill="red"
-            id="circle25_0"
+            id="circle2_0"
+            key="circle2_0"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -2947,7 +2965,8 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
             cy={20}
             data-is-focusable={true}
             fill="red"
-            id="circle25_1"
+            id="circle2_1"
+            key="circle2_1"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -2960,7 +2979,8 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
           />
         </g>
         <line
-          id="verticalLine_24"
+          id="verticalLine_1"
+          key="verticalLine_1"
           opacity={0.5}
           stroke="red"
           strokeDasharray={5.5}
@@ -2969,7 +2989,7 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
           x1={0}
           x2={0}
           y1={0}
-          y2={0}
+          y2={310}
         />
       </g>
     </svg>
@@ -3003,7 +3023,7 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone30"
+        data-focuszone-id="FocusZone7"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -3027,6 +3047,7 @@ exports[`AreaChart snapShot testing renders enabledLegendsWrapLines correctly 1`
                   display: inherit;
                   flex-shrink: 0;
                 }
+            key="0"
             role="none"
           >
             <button
@@ -3136,7 +3157,7 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_13"
+  id="chart_5"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3149,14 +3170,14 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone14"
+    data-focuszone-id="FocusZone6"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       aria-label="AreaChart"
-      height={0}
+      height={350}
       style={
         Object {
           "display": "block",
@@ -3190,8 +3211,8 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_13"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_5"
+        transform="translate(0, 315)"
       />
       <g
         className=
@@ -3218,14 +3239,14 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_13"
+        id="yAxisGElementchart_5"
         transform="translate(40, 0)"
       />
       <g>
         <rect
           fill="transparent"
-          height={-20}
-          id="rectangle11"
+          height={330}
+          id="rectangle3"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -3234,9 +3255,9 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
       </g>
       <g>
         <path
-          d="M40,-0.625L-20,20"
+          d="M40,130.625L-20,20"
           fill="transparent"
-          id="0-line-areaChart_8"
+          id="0-line-areaChart_0"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -3245,10 +3266,10 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
           strokeWidth={3}
         />
         <path
-          d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          d="M40,130.625L-20,20L-20,315L40,315Z"
           fill="red"
           fillOpacity={0.7}
-          id="0-graph-areaChart_8"
+          id="0-graph-areaChart_0"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -3256,15 +3277,17 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
         />
         <g
           clipPath="url(#clip)"
-          d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          d="M40,130.625L-20,20L-20,315L40,315Z"
+          key="0-dots-areaChart_0"
         >
           <circle
             aria-label="20. metaData1, 50."
             cx={40}
-            cy={-0.625}
+            cy={130.625}
             data-is-focusable={true}
             fill="red"
-            id="circle10_0"
+            id="circle2_0"
+            key="circle2_0"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -3281,7 +3304,8 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
             cy={20}
             data-is-focusable={true}
             fill="red"
-            id="circle10_1"
+            id="circle2_1"
+            key="circle2_1"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -3294,7 +3318,8 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
           />
         </g>
         <line
-          id="verticalLine_9"
+          id="verticalLine_1"
+          key="verticalLine_1"
           opacity={0.5}
           stroke="red"
           strokeDasharray={5.5}
@@ -3303,7 +3328,7 @@ exports[`AreaChart snapShot testing renders hideLegend hhh correctly 1`] = `
           x1={0}
           x2={0}
           y1={0}
-          y2={0}
+          y2={350}
         />
       </g>
     </svg>
@@ -3330,7 +3355,7 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_20"
+  id="chart_5"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3343,14 +3368,14 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone21"
+    data-focuszone-id="FocusZone6"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       aria-label="AreaChart"
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -3384,8 +3409,8 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_20"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_5"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -3412,14 +3437,14 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_20"
+        id="yAxisGElementchart_5"
         transform="translate(40, 0)"
       />
       <g>
         <rect
           fill="transparent"
-          height={-20}
-          id="rectangle18"
+          height={290}
+          id="rectangle3"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -3428,9 +3453,9 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
       </g>
       <g>
         <path
-          d="M40,-0.625L-20,20"
+          d="M40,115.625L-20,20"
           fill="transparent"
-          id="0-line-areaChart_15"
+          id="0-line-areaChart_0"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -3439,10 +3464,10 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
           strokeWidth={3}
         />
         <path
-          d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
           fill="red"
           fillOpacity={0.7}
-          id="0-graph-areaChart_15"
+          id="0-graph-areaChart_0"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -3450,15 +3475,17 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
         />
         <g
           clipPath="url(#clip)"
-          d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
         >
           <circle
             aria-label="20. metaData1, 50."
             cx={40}
-            cy={-0.625}
+            cy={115.625}
             data-is-focusable={true}
             fill="red"
-            id="circle17_0"
+            id="circle2_0"
+            key="circle2_0"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -3475,7 +3502,8 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
             cy={20}
             data-is-focusable={true}
             fill="red"
-            id="circle17_1"
+            id="circle2_1"
+            key="circle2_1"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -3488,7 +3516,8 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
           />
         </g>
         <line
-          id="verticalLine_16"
+          id="verticalLine_1"
+          key="verticalLine_1"
           opacity={0.5}
           stroke="red"
           strokeDasharray={5.5}
@@ -3497,7 +3526,7 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
           x1={0}
           x2={0}
           y1={0}
-          y2={0}
+          y2={310}
         />
       </g>
     </svg>
@@ -3548,7 +3577,7 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone22"
+              data-focuszone-id="FocusZone7"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3572,6 +3601,7 @@ exports[`AreaChart snapShot testing renders hideTooltip correctly 1`] = `
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -3684,7 +3714,7 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
         overflow: hidden;
         width: 100%;
       }
-  id="chart_36"
+  id="chart_5"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3697,14 +3727,14 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone37"
+    data-focuszone-id="FocusZone6"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       aria-label="AreaChart"
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -3738,8 +3768,8 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
             & path {
               display: none;
             }
-        id="xAxisGElementchart_36"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_5"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -3766,14 +3796,14 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_36"
+        id="yAxisGElementchart_5"
         transform="translate(40, 0)"
       />
       <g>
         <rect
           fill="transparent"
-          height={-20}
-          id="rectangle34"
+          height={290}
+          id="rectangle3"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -3782,9 +3812,9 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
       </g>
       <g>
         <path
-          d="M40,-0.625L-20,20"
+          d="M40,115.625L-20,20"
           fill="transparent"
-          id="0-line-areaChart_31"
+          id="0-line-areaChart_0"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -3793,10 +3823,10 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
           strokeWidth={3}
         />
         <path
-          d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
           fill="red"
           fillOpacity={0.7}
-          id="0-graph-areaChart_31"
+          id="0-graph-areaChart_0"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -3804,15 +3834,17 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
         />
         <g
           clipPath="url(#clip)"
-          d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
         >
           <circle
             aria-label="20. metaData1, 50."
             cx={40}
-            cy={-0.625}
+            cy={115.625}
             data-is-focusable={true}
             fill="red"
-            id="circle33_0"
+            id="circle2_0"
+            key="circle2_0"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -3829,7 +3861,8 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
             cy={20}
             data-is-focusable={true}
             fill="red"
-            id="circle33_1"
+            id="circle2_1"
+            key="circle2_1"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -3842,7 +3875,8 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
           />
         </g>
         <line
-          id="verticalLine_32"
+          id="verticalLine_1"
+          key="verticalLine_1"
           opacity={0.5}
           stroke="red"
           strokeDasharray={5.5}
@@ -3851,7 +3885,7 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
           x1={0}
           x2={0}
           y1={0}
-          y2={0}
+          y2={310}
         />
       </g>
     </svg>
@@ -3902,7 +3936,7 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone38"
+              data-focuszone-id="FocusZone7"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3926,6 +3960,7 @@ exports[`AreaChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -4038,7 +4073,7 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_44"
+  id="chart_5"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4051,14 +4086,14 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone45"
+    data-focuszone-id="FocusZone6"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       aria-label="AreaChart"
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -4092,8 +4127,8 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_44"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_5"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -4120,14 +4155,14 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_44"
+        id="yAxisGElementchart_5"
         transform="translate(40, 0)"
       />
       <g>
         <rect
           fill="transparent"
-          height={-20}
-          id="rectangle42"
+          height={290}
+          id="rectangle3"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -4136,9 +4171,9 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
       </g>
       <g>
         <path
-          d="M40,-0.625L-20,20"
+          d="M40,115.625L-20,20"
           fill="transparent"
-          id="0-line-areaChart_39"
+          id="0-line-areaChart_0"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -4147,10 +4182,10 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
           strokeWidth={3}
         />
         <path
-          d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
           fill="red"
           fillOpacity={0.7}
-          id="0-graph-areaChart_39"
+          id="0-graph-areaChart_0"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -4158,15 +4193,17 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
         />
         <g
           clipPath="url(#clip)"
-          d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
         >
           <circle
             aria-label="20. metaData1, 50."
             cx={40}
-            cy={-0.625}
+            cy={115.625}
             data-is-focusable={true}
             fill="red"
-            id="circle41_0"
+            id="circle2_0"
+            key="circle2_0"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -4183,7 +4220,8 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
             cy={20}
             data-is-focusable={true}
             fill="red"
-            id="circle41_1"
+            id="circle2_1"
+            key="circle2_1"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -4196,7 +4234,8 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
           />
         </g>
         <line
-          id="verticalLine_40"
+          id="verticalLine_1"
+          key="verticalLine_1"
           opacity={0.5}
           stroke="red"
           strokeDasharray={5.5}
@@ -4205,7 +4244,7 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
           x1={0}
           x2={0}
           y1={0}
-          y2={0}
+          y2={310}
         />
       </g>
     </svg>
@@ -4256,7 +4295,7 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone46"
+              data-focuszone-id="FocusZone7"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4280,6 +4319,7 @@ exports[`AreaChart snapShot testing renders wrapXAxisLables correctly 1`] = `
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -4392,7 +4432,7 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_52"
+  id="chart_5"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4405,14 +4445,14 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone53"
+    data-focuszone-id="FocusZone6"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       aria-label="AreaChart"
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -4446,8 +4486,8 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_52"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_5"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -4474,14 +4514,14 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_52"
+        id="yAxisGElementchart_5"
         transform="translate(40, 0)"
       />
       <g>
         <rect
           fill="transparent"
-          height={-20}
-          id="rectangle50"
+          height={290}
+          id="rectangle3"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -4490,9 +4530,9 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
       </g>
       <g>
         <path
-          d="M40,-0.625L-20,20"
+          d="M40,115.625L-20,20"
           fill="transparent"
-          id="0-line-areaChart_47"
+          id="0-line-areaChart_0"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -4501,10 +4541,10 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
           strokeWidth={3}
         />
         <path
-          d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
           fill="red"
           fillOpacity={0.7}
-          id="0-graph-areaChart_47"
+          id="0-graph-areaChart_0"
           onMouseMove={[Function]}
           onMouseOut={[Function]}
           onMouseOver={[Function]}
@@ -4512,15 +4552,17 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         />
         <g
           clipPath="url(#clip)"
-          d="M40,-0.625L-20,20L-20,-35L40,-35Z"
+          d="M40,115.625L-20,20L-20,275L40,275Z"
+          key="0-dots-areaChart_0"
         >
           <circle
             aria-label="20. metaData1, 50."
             cx={40}
-            cy={-0.625}
+            cy={115.625}
             data-is-focusable={true}
             fill="red"
-            id="circle49_0"
+            id="circle2_0"
+            key="circle2_0"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -4537,7 +4579,8 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
             cy={20}
             data-is-focusable={true}
             fill="red"
-            id="circle49_1"
+            id="circle2_1"
+            key="circle2_1"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -4550,7 +4593,8 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
           />
         </g>
         <line
-          id="verticalLine_48"
+          id="verticalLine_1"
+          key="verticalLine_1"
           opacity={0.5}
           stroke="red"
           strokeDasharray={5.5}
@@ -4559,7 +4603,7 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
           x1={0}
           x2={0}
           y1={0}
-          y2={0}
+          y2={310}
         />
       </g>
     </svg>
@@ -4610,7 +4654,7 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone54"
+              data-focuszone-id="FocusZone7"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4634,6 +4678,7 @@ exports[`AreaChart snapShot testing renders yAxisTickFormat correctly 1`] = `
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
index e3bb0550ee0564..dd9fd3cec62648 100644
--- a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
+++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
@@ -75,6 +75,7 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
   private _reqID: number;
   private _isRtl: boolean = getRTL();
   private _tickValues: (string | number)[];
+  private _isFirstRender: boolean = true;
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private _xScale: any;
@@ -215,173 +216,187 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
     // Callback for margins to the chart
     this.props.getmargins && this.props.getmargins(margin);
 
-    const XAxisParams = {
-      domainNRangeValues: getDomainNRangeValues(
-        points,
-        this.props.getDomainMargins ? this.props.getDomainMargins(this.state.containerWidth) : this.margins,
-        this.state.containerWidth,
-        chartType,
-        this._isRtl,
-        this.props.xAxisType,
-        this.props.barwidth!,
-        this.props.tickValues!,
-        // This is only used for Horizontal Bar Chart with Axis for y as string axis
-        this.state.startFromX,
-      ),
-      containerHeight: this.state.containerHeight - this.state._removalValueForTextTuncate!,
-      margins: this.margins,
-      xAxisElement: this.xAxisElement!,
-      showRoundOffXTickValues: true,
-      xAxisCount: this.props.xAxisTickCount,
-      xAxistickSize: this.props.xAxistickSize,
-      tickPadding: this.props.tickPadding || this.props.showXAxisLablesTooltip ? 5 : 10,
-      xAxisPadding: this.props.xAxisPadding,
-      xAxisInnerPadding: this.props.xAxisInnerPadding,
-      xAxisOuterPadding: this.props.xAxisOuterPadding,
-    };
+    let children = null;
+    if (
+      (this.props.enableFirstRenderOptimization && this.chartContainer) ||
+      !this.props.enableFirstRenderOptimization
+    ) {
+      this._isFirstRender = false;
+      const XAxisParams = {
+        domainNRangeValues: getDomainNRangeValues(
+          points,
+          this.props.getDomainMargins ? this.props.getDomainMargins(this.state.containerWidth) : this.margins,
+          this.state.containerWidth,
+          chartType,
+          this._isRtl,
+          this.props.xAxisType,
+          this.props.barwidth!,
+          this.props.tickValues!,
+          // This is only used for Horizontal Bar Chart with Axis for y as string axis
+          this.state.startFromX,
+        ),
+        containerHeight: this.state.containerHeight - this.state._removalValueForTextTuncate!,
+        margins: this.margins,
+        xAxisElement: this.xAxisElement!,
+        showRoundOffXTickValues: true,
+        xAxisCount: this.props.xAxisTickCount,
+        xAxistickSize: this.props.xAxistickSize,
+        tickPadding: this.props.tickPadding || this.props.showXAxisLablesTooltip ? 5 : 10,
+        xAxisPadding: this.props.xAxisPadding,
+        xAxisInnerPadding: this.props.xAxisInnerPadding,
+        xAxisOuterPadding: this.props.xAxisOuterPadding,
+      };
 
-    const YAxisParams = {
-      margins: this.margins,
-      containerWidth: this.state.containerWidth,
-      containerHeight: this.state.containerHeight - this.state._removalValueForTextTuncate!,
-      yAxisElement: this.yAxisElement,
-      yAxisTickFormat: this.props.yAxisTickFormat!,
-      yAxisTickCount: this.props.yAxisTickCount!,
-      yMinValue: this.props.yMinValue || 0,
-      yMaxValue: this.props.yMaxValue || 0,
-      tickPadding: 10,
-      maxOfYVal: this.props.maxOfYVal,
-      yMinMaxValues: getMinMaxOfYAxis(points, chartType, this.props.yAxisType),
-      // please note these padding default values must be consistent in here
-      // and the parent chart(HBWA/Vertical etc..) for more details refer example
-      // http://using-d3js.com/04_07_ordinal_scales.html
-      yAxisPadding: this.props.yAxisPadding || 0,
-    };
-    /**
-     * These scales used for 2 purposes.
-     * 1. To create x and y axis
-     * 2. To draw the graph.
-     * For area/line chart using same scales. For other charts, creating their own scales to draw the graph.
-     */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let xScale: any;
-    let tickValues: (string | number)[];
-    switch (this.props.xAxisType!) {
-      case XAxisTypes.NumericAxis:
-        ({ xScale, tickValues } = createNumericXAxis(XAxisParams, this.props.chartType, culture));
-        break;
-      case XAxisTypes.DateAxis:
-        ({ xScale, tickValues } = createDateXAxis(
-          XAxisParams,
-          this.props.tickParams!,
-          culture,
-          dateLocalizeOptions,
-          timeFormatLocale,
-          customDateTimeFormatter,
-        ));
-        break;
-      case XAxisTypes.StringAxis:
-        ({ xScale, tickValues } = createStringXAxis(
-          XAxisParams,
-          this.props.tickParams!,
-          this.props.datasetForXAxisDomain!,
-          culture,
-        ));
-        break;
-      default:
-        ({ xScale, tickValues } = createNumericXAxis(XAxisParams, this.props.chartType, culture));
-    }
-    this._xScale = xScale;
-    this._tickValues = tickValues;
-
-    /*
-     * To enable wrapping of x axis tick values or to display complete x axis tick values,
-     * we need to calculate how much space it needed to render the text.
-     * No need to re-calculate every time the chart renders and same time need to get an update. So using setState.
-     * Required space will be calculated first time chart rendering and if any width/height of chart updated.
-     * */
-    if (this.props.wrapXAxisLables || this.props.showXAxisLablesTooltip) {
-      const wrapLabelProps = {
-        node: this.xAxisElement,
-        xAxis: xScale,
-        showXAxisLablesTooltip: this.props.showXAxisLablesTooltip || false,
-        noOfCharsToTruncate: this.props.noOfCharsToTruncate || 4,
+      const YAxisParams = {
+        margins: this.margins,
+        containerWidth: this.state.containerWidth,
+        containerHeight: this.state.containerHeight - this.state._removalValueForTextTuncate!,
+        yAxisElement: this.yAxisElement,
+        yAxisTickFormat: this.props.yAxisTickFormat!,
+        yAxisTickCount: this.props.yAxisTickCount!,
+        yMinValue: this.props.yMinValue || 0,
+        yMaxValue: this.props.yMaxValue || 0,
+        tickPadding: 10,
+        maxOfYVal: this.props.maxOfYVal,
+        yMinMaxValues: getMinMaxOfYAxis(points, chartType, this.props.yAxisType),
+        // please note these padding default values must be consistent in here
+        // and the parent chart(HBWA/Vertical etc..) for more details refer example
+        // http://using-d3js.com/04_07_ordinal_scales.html
+        yAxisPadding: this.props.yAxisPadding || 0,
       };
-      const temp = xScale && (createWrapOfXLabels(wrapLabelProps) as number);
-      // this value need to be updated for draw graph updated. So instead of using private value, using set state.
-      if (this.state.isRemoveValCalculated && this.state._removalValueForTextTuncate !== temp) {
-        this.setState({ _removalValueForTextTuncate: temp, isRemoveValCalculated: false });
+      /**
+       * These scales used for 2 purposes.
+       * 1. To create x and y axis
+       * 2. To draw the graph.
+       * For area/line chart using same scales. For other charts, creating their own scales to draw the graph.
+       */
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      let xScale: any;
+      let tickValues: (string | number)[];
+      switch (this.props.xAxisType!) {
+        case XAxisTypes.NumericAxis:
+          ({ xScale, tickValues } = createNumericXAxis(XAxisParams, this.props.chartType, culture));
+          break;
+        case XAxisTypes.DateAxis:
+          ({ xScale, tickValues } = createDateXAxis(
+            XAxisParams,
+            this.props.tickParams!,
+            culture,
+            dateLocalizeOptions,
+            timeFormatLocale,
+            customDateTimeFormatter,
+          ));
+          break;
+        case XAxisTypes.StringAxis:
+          ({ xScale, tickValues } = createStringXAxis(
+            XAxisParams,
+            this.props.tickParams!,
+            this.props.datasetForXAxisDomain!,
+            culture,
+          ));
+          break;
+        default:
+          ({ xScale, tickValues } = createNumericXAxis(XAxisParams, this.props.chartType, culture));
       }
-    }
-
-    /**
-     * These scales used for 2 purposes.
-     * 1. To create x and y axis
-     * 2. To draw the graph.
-     * For area/line chart using same scales. For other charts, creating their own scales to draw the graph.
-     */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let yScale: any;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let yScaleSecondary: any;
-    const axisData: IAxisData = { yAxisDomainValues: [] };
-    if (this.props.yAxisType && this.props.yAxisType === YAxisType.StringAxis) {
-      yScale = createStringYAxis(
-        YAxisParams,
-        this.props.stringDatasetForYAxisDomain!,
-        this._isRtl,
-        this.props.chartType,
-        this.props.barwidth,
-        culture,
-      );
-    } else {
-      if (this.props?.secondaryYScaleOptions) {
-        const YAxisParamsSecondary = {
-          margins: this.margins,
-          containerWidth: this.state.containerWidth,
-          containerHeight: this.state.containerHeight - this.state._removalValueForTextTuncate!,
-          yAxisElement: this.yAxisElementSecondary,
-          yAxisTickFormat: this.props.yAxisTickFormat!,
-          yAxisTickCount: this.props.yAxisTickCount!,
-          yMinValue: this.props.secondaryYScaleOptions?.yMinValue || 0,
-          yMaxValue: this.props.secondaryYScaleOptions?.yMaxValue ?? 100,
-          tickPadding: 10,
-          maxOfYVal: this.props.secondaryYScaleOptions?.yMaxValue ?? 100,
-          yMinMaxValues: getMinMaxOfYAxis(points, chartType),
-          yAxisPadding: this.props.yAxisPadding,
+      this._xScale = xScale;
+      this._tickValues = tickValues;
+
+      /*
+       * To enable wrapping of x axis tick values or to display complete x axis tick values,
+       * we need to calculate how much space it needed to render the text.
+       * No need to re-calculate every time the chart renders and same time need to get an update. So using setState.
+       * Required space will be calculated first time chart rendering and if any width/height of chart updated.
+       * */
+      if (this.props.wrapXAxisLables || this.props.showXAxisLablesTooltip) {
+        const wrapLabelProps = {
+          node: this.xAxisElement,
+          xAxis: xScale,
+          showXAxisLablesTooltip: this.props.showXAxisLablesTooltip || false,
+          noOfCharsToTruncate: this.props.noOfCharsToTruncate || 4,
         };
+        const temp = xScale && (createWrapOfXLabels(wrapLabelProps) as number);
+        // this value need to be updated for draw graph updated. So instead of using private value, using set state.
+        if (this.state.isRemoveValCalculated && this.state._removalValueForTextTuncate !== temp) {
+          this.setState({ _removalValueForTextTuncate: temp, isRemoveValCalculated: false });
+        }
+      }
 
-        yScaleSecondary = createYAxis(
-          YAxisParamsSecondary,
+      /**
+       * These scales used for 2 purposes.
+       * 1. To create x and y axis
+       * 2. To draw the graph.
+       * For area/line chart using same scales. For other charts, creating their own scales to draw the graph.
+       */
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      let yScale: any;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      let yScaleSecondary: any;
+      const axisData: IAxisData = { yAxisDomainValues: [] };
+      if (this.props.yAxisType && this.props.yAxisType === YAxisType.StringAxis) {
+        yScale = createStringYAxis(
+          YAxisParams,
+          this.props.stringDatasetForYAxisDomain!,
           this._isRtl,
-          axisData,
-          chartType,
-          this.props.barwidth!,
-          true,
+          this.props.chartType,
+          this.props.barwidth,
+          culture,
         );
+      } else {
+        if (this.props?.secondaryYScaleOptions) {
+          const YAxisParamsSecondary = {
+            margins: this.margins,
+            containerWidth: this.state.containerWidth,
+            containerHeight: this.state.containerHeight - this.state._removalValueForTextTuncate!,
+            yAxisElement: this.yAxisElementSecondary,
+            yAxisTickFormat: this.props.yAxisTickFormat!,
+            yAxisTickCount: this.props.yAxisTickCount!,
+            yMinValue: this.props.secondaryYScaleOptions?.yMinValue || 0,
+            yMaxValue: this.props.secondaryYScaleOptions?.yMaxValue ?? 100,
+            tickPadding: 10,
+            maxOfYVal: this.props.secondaryYScaleOptions?.yMaxValue ?? 100,
+            yMinMaxValues: getMinMaxOfYAxis(points, chartType),
+            yAxisPadding: this.props.yAxisPadding,
+          };
+
+          yScaleSecondary = createYAxis(
+            YAxisParamsSecondary,
+            this._isRtl,
+            axisData,
+            chartType,
+            this.props.barwidth!,
+            true,
+          );
+        }
+        yScale = createYAxis(YAxisParams, this._isRtl, axisData, chartType, this.props.barwidth!);
       }
-      yScale = createYAxis(YAxisParams, this._isRtl, axisData, chartType, this.props.barwidth!);
-    }
 
-    /*
+      /*
      * To create y axis tick values by if specified
     truncating the rest of the text and showing elipsis
     or showing the whole string,
      * */
-    this.props.chartType === ChartTypes.HorizontalBarChartWithAxis &&
-      yScale &&
-      createYAxisLabels(
-        this.yAxisElement,
-        yScale,
-        this.props.noOfCharsToTruncate || 4,
-        this.props.showYAxisLablesTooltip || false,
-        this.state.startFromX,
-        this._isRtl,
-      );
+      this.props.chartType === ChartTypes.HorizontalBarChartWithAxis &&
+        yScale &&
+        createYAxisLabels(
+          this.yAxisElement,
+          yScale,
+          this.props.noOfCharsToTruncate || 4,
+          this.props.showYAxisLablesTooltip || false,
+          this.state.startFromX,
+          this._isRtl,
+        );
 
-    this.props.getAxisData && this.props.getAxisData(axisData);
-    // Callback function for chart, returns axis
-    this._getData(xScale, yScale);
+      this.props.getAxisData && this.props.getAxisData(axisData);
+      // Callback function for chart, returns axis
+      this._getData(xScale, yScale);
+
+      children = this.props.children({
+        ...this.state,
+        xScale,
+        yScale,
+        yScaleSecondary,
+      });
+    }
 
     this._classNames = getClassNames(this.props.styles!, {
       theme: this.props.theme!,
@@ -396,13 +411,6 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
       height: this.state.containerHeight,
     };
 
-    const children = this.props.children({
-      ...this.state,
-      xScale,
-      yScale,
-      yScaleSecondary,
-    });
-
     let focusDirection;
     if (this.props.focusZoneDirection === FocusZoneDirection.vertical) {
       focusDirection = this.props.focusZoneDirection;
@@ -662,9 +670,10 @@ export class CartesianChartBase extends React.Component<IModifiedCartesianChartP
       }
       if (this.props.parentRef || this.chartContainer) {
         const container = this.props.parentRef ? this.props.parentRef : this.chartContainer;
-        const currentContainerWidth = this.props.enableReflow
-          ? Math.max(container.getBoundingClientRect().width, this._calculateChartMinWidth())
-          : container.getBoundingClientRect().width;
+        const currentContainerWidth =
+          this.props.enableReflow && !this._isFirstRender
+            ? Math.max(container.getBoundingClientRect().width, this._calculateChartMinWidth())
+            : container.getBoundingClientRect().width;
         const currentContainerHeight =
           container.getBoundingClientRect().height > legendContainerHeight
             ? container.getBoundingClientRect().height
diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts b/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts
index 982786f414379e..f479a0b4b372fc 100644
--- a/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts
+++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts
@@ -568,4 +568,10 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
    *@default false
    *Used for showing complete y axis lables   */
   showYAxisLables?: boolean;
+
+  /**
+   * @default false
+   * Used to control the first render cycle Performance optimization code.
+   */
+  enableFirstRenderOptimization?: boolean;
 }
diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx
index 6261ae544d0ba4..f47fc308799bb0 100644
--- a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx
+++ b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx
@@ -1,7 +1,6 @@
 jest.mock('react-dom');
 import * as React from 'react';
 import { resetIds } from '../../Utilities';
-import * as renderer from 'react-test-renderer';
 import { mount, ReactWrapper } from 'enzyme';
 import { DefaultPalette } from '@fluentui/react/lib/Styling';
 import { IGroupedVerticalBarChartProps, GroupedVerticalBarChart, IGVBarChartSeriesPoint } from '../../index';
@@ -12,9 +11,15 @@ import toJson from 'enzyme-to-json';
 let wrapper:
   | ReactWrapper<IGroupedVerticalBarChartProps, IGroupedVerticalBarChartState, GroupedVerticalBarChartBase>
   | undefined;
+const originalRAF = window.requestAnimationFrame;
 
 function sharedBeforeEach() {
   resetIds();
+  jest.useFakeTimers();
+  Object.defineProperty(window, 'requestAnimationFrame', {
+    writable: true,
+    value: (callback: FrameRequestCallback) => callback(0),
+  });
 }
 
 function sharedAfterEach() {
@@ -29,6 +34,8 @@ function sharedAfterEach() {
   if ((global.setTimeout as any).mock) {
     jest.useRealTimers();
   }
+  jest.useRealTimers();
+  window.requestAnimationFrame = originalRAF;
 }
 
 const chartPoints = [
@@ -88,45 +95,85 @@ const emptyChartPoints = [
 ];
 
 describe('GroupedVerticalBarChart snapShot testing', () => {
-  it('renders GroupedVerticalBarChart correctly', () => {
-    const component = renderer.create(<GroupedVerticalBarChart data={chartPoints} />);
-    const tree = component.toJSON();
+  beforeEach(() => {
+    resetIds();
+  });
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount();
+      wrapper = undefined;
+    }
+
+    // Do this after unmounting the wrapper to make sure if any timers cleaned up on unmount are
+    // cleaned up in fake timers world
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if ((global.setTimeout as any).mock) {
+      jest.useRealTimers();
+    }
+  });
+  it('renders GroupedVerticalBarChart correctly', async () => {
+    wrapper = mount(<GroupedVerticalBarChart data={chartPoints} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders hideLegend correctly', () => {
-    const component = renderer.create(<GroupedVerticalBarChart data={chartPoints} hideLegend={true} />);
-    const tree = component.toJSON();
+  it('renders hideLegend correctly', async () => {
+    wrapper = mount(<GroupedVerticalBarChart data={chartPoints} hideLegend={true} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders hideTooltip correctly', () => {
-    const component = renderer.create(<GroupedVerticalBarChart data={chartPoints} hideTooltip={true} />);
-    const tree = component.toJSON();
+  it('renders hideTooltip correctly', async () => {
+    wrapper = mount(<GroupedVerticalBarChart data={chartPoints} hideTooltip={true} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders enabledLegendsWrapLines correctly', () => {
-    const component = renderer.create(<GroupedVerticalBarChart data={chartPoints} enabledLegendsWrapLines={true} />);
-    const tree = component.toJSON();
+  it('renders enabledLegendsWrapLines correctly', async () => {
+    wrapper = mount(<GroupedVerticalBarChart data={chartPoints} enabledLegendsWrapLines={true} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders showXAxisLablesTooltip correctly', () => {
-    const component = renderer.create(<GroupedVerticalBarChart data={chartPoints} showXAxisLablesTooltip={true} />);
-    const tree = component.toJSON();
+  it('renders showXAxisLablesTooltip correctly', async () => {
+    wrapper = mount(<GroupedVerticalBarChart data={chartPoints} showXAxisLablesTooltip={true} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders wrapXAxisLables correctly', () => {
-    const component = renderer.create(<GroupedVerticalBarChart data={chartPoints} wrapXAxisLables={true} />);
-    const tree = component.toJSON();
+  it('renders wrapXAxisLables correctly', async () => {
+    const mockGetComputedTextLength = jest.fn().mockReturnValue(100);
+
+    // Replace the original method with the mock implementation
+    Object.defineProperty(
+      Object.getPrototypeOf(document.createElementNS('http://www.w3.org/2000/svg', 'tspan')),
+      'getComputedTextLength',
+      {
+        value: mockGetComputedTextLength,
+      },
+    );
+    wrapper = mount(<GroupedVerticalBarChart data={chartPoints} wrapXAxisLables={true} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper!, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders yAxisTickFormat correctly', () => {
-    const component = renderer.create(<GroupedVerticalBarChart data={chartPoints} yAxisTickFormat={'/%d'} />);
-    const tree = component.toJSON();
+  it('renders yAxisTickFormat correctly', async () => {
+    wrapper = mount(<GroupedVerticalBarChart data={chartPoints} yAxisTickFormat={'/%d'} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper!, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 });
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 f4c7cddb6106cf..813b0f62f75a74 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
@@ -35,7 +35,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
     onMouseDownCapture={[Function]}
   >
     <svg
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -70,7 +70,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
               display: none;
             }
         id="xAxisGElementchart_2"
-        transform="translate(0, -35)"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -114,7 +114,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
                 }
             data-is-focusable={true}
             fill="#0078d4"
-            height={0}
+            height={182.93478260869566}
             key="0-0"
             onBlur={[Function]}
             onFocus={[Function]}
@@ -125,7 +125,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
             role="img"
             width={-9}
             x={0}
-            y={4.45652173913043}
+            y={92.06521739130434}
           />
           <rect
             aria-label="2000. MetaData2, 13."
@@ -136,7 +136,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
                 }
             data-is-focusable={true}
             fill="#00188f"
-            height={0}
+            height={36.03260869565217}
             key="0-1"
             onBlur={[Function]}
             onFocus={[Function]}
@@ -147,7 +147,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
             role="img"
             width={-9}
             x={10}
-            y={0}
+            y={238.9673913043478}
           />
           <rect
             aria-label="2000. MetaData3, 34."
@@ -158,7 +158,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
                 }
             data-is-focusable={true}
             fill="#00bcf2"
-            height={0}
+            height={94.23913043478261}
             key="0-2"
             onBlur={[Function]}
             onFocus={[Function]}
@@ -169,7 +169,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
             role="img"
             width={-9}
             x={20}
-            y={0}
+            y={180.76086956521738}
           />
         </g>
         <g
@@ -185,7 +185,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
                 }
             data-is-focusable={true}
             fill="#0078d4"
-            height={0}
+            height={38.80434782608696}
             key="1-0"
             onBlur={[Function]}
             onFocus={[Function]}
@@ -196,7 +196,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
             role="img"
             width={-9}
             x={0}
-            y={0}
+            y={236.19565217391303}
           />
           <rect
             aria-label="2010. MetaData2, 90."
@@ -207,7 +207,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
                 }
             data-is-focusable={true}
             fill="#00188f"
-            height={0}
+            height={249.45652173913044}
             key="1-1"
             onBlur={[Function]}
             onFocus={[Function]}
@@ -218,7 +218,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
             role="img"
             width={-9}
             x={10}
-            y={18.80434782608696}
+            y={25.543478260869563}
           />
           <rect
             aria-label="2010. MetaData3, 33."
@@ -229,7 +229,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
                 }
             data-is-focusable={true}
             fill="#00bcf2"
-            height={0}
+            height={91.46739130434783}
             key="1-2"
             onBlur={[Function]}
             onFocus={[Function]}
@@ -240,7 +240,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
             role="img"
             width={-9}
             x={20}
-            y={0}
+            y={183.5326086956522}
           />
         </g>
       </g>
@@ -277,12 +277,6 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
         >
           <div
             data-automation-id="visibleContent"
-            style={
-              Object {
-                "position": "fixed",
-                "visibility": "hidden",
-              }
-            }
           >
             <div
               aria-label="Legends"
@@ -621,14 +615,20 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
           &::-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 {
-          "filter": "opacity(0)",
-          "opacity": 0,
-          "pointerEvents": "none",
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
         }
       }
       tabIndex={-1}
@@ -787,7 +787,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
     onMouseDownCapture={[Function]}
   >
     <svg
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -822,7 +822,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
               display: none;
             }
         id="xAxisGElementchart_2"
-        transform="translate(0, -35)"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -866,7 +866,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
                 }
             data-is-focusable={true}
             fill="#0078d4"
-            height={0}
+            height={182.93478260869566}
             key="0-0"
             onBlur={[Function]}
             onFocus={[Function]}
@@ -877,7 +877,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
             role="img"
             width={-9}
             x={0}
-            y={4.45652173913043}
+            y={92.06521739130434}
           />
           <rect
             aria-label="2000. MetaData2, 13."
@@ -888,7 +888,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
                 }
             data-is-focusable={true}
             fill="#00188f"
-            height={0}
+            height={36.03260869565217}
             key="0-1"
             onBlur={[Function]}
             onFocus={[Function]}
@@ -899,7 +899,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
             role="img"
             width={-9}
             x={10}
-            y={0}
+            y={238.9673913043478}
           />
           <rect
             aria-label="2000. MetaData3, 34."
@@ -910,7 +910,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
                 }
             data-is-focusable={true}
             fill="#00bcf2"
-            height={0}
+            height={94.23913043478261}
             key="0-2"
             onBlur={[Function]}
             onFocus={[Function]}
@@ -921,7 +921,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
             role="img"
             width={-9}
             x={20}
-            y={0}
+            y={180.76086956521738}
           />
         </g>
         <g
@@ -937,7 +937,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
                 }
             data-is-focusable={true}
             fill="#0078d4"
-            height={0}
+            height={38.80434782608696}
             key="1-0"
             onBlur={[Function]}
             onFocus={[Function]}
@@ -948,7 +948,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
             role="img"
             width={-9}
             x={0}
-            y={0}
+            y={236.19565217391303}
           />
           <rect
             aria-label="2010. MetaData2, 90."
@@ -959,7 +959,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
                 }
             data-is-focusable={true}
             fill="#00188f"
-            height={0}
+            height={249.45652173913044}
             key="1-1"
             onBlur={[Function]}
             onFocus={[Function]}
@@ -970,7 +970,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
             role="img"
             width={-9}
             x={10}
-            y={18.80434782608696}
+            y={25.543478260869563}
           />
           <rect
             aria-label="2010. MetaData3, 33."
@@ -981,7 +981,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
                 }
             data-is-focusable={true}
             fill="#00bcf2"
-            height={0}
+            height={91.46739130434783}
             key="1-2"
             onBlur={[Function]}
             onFocus={[Function]}
@@ -992,7 +992,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
             role="img"
             width={-9}
             x={20}
-            y={0}
+            y={183.5326086956522}
           />
         </g>
       </g>
@@ -1029,12 +1029,6 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
         >
           <div
             data-automation-id="visibleContent"
-            style={
-              Object {
-                "position": "fixed",
-                "visibility": "hidden",
-              }
-            }
           >
             <div
               aria-label="Legends"
@@ -1373,14 +1367,20 @@ exports[`GroupedVerticalBarChart - mouse events Should render customized callout
           &::-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 {
-          "filter": "opacity(0)",
-          "opacity": 0,
-          "pointerEvents": "none",
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
         }
       }
       tabIndex={-1}
@@ -1459,7 +1459,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
     onMouseDownCapture={[Function]}
   >
     <svg
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -1494,7 +1494,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
               display: none;
             }
         id="xAxisGElementchart_2"
-        transform="translate(0, -35)"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -1526,6 +1526,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
       />
       <g>
         <g
+          key="0"
           transform="translate(19, 0)"
         >
           <rect
@@ -1537,7 +1538,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
                 }
             data-is-focusable={true}
             fill="#0078d4"
-            height={0}
+            height={182.93478260869566}
+            key="0-0"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -1547,7 +1549,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
             role="img"
             width={-9}
             x={0}
-            y={4.45652173913043}
+            y={92.06521739130434}
           />
           <rect
             aria-label="2000. MetaData2, 13."
@@ -1558,7 +1560,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
                 }
             data-is-focusable={true}
             fill="#00188f"
-            height={0}
+            height={36.03260869565217}
+            key="0-1"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -1568,7 +1571,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
             role="img"
             width={-9}
             x={10}
-            y={0}
+            y={238.9673913043478}
           />
           <rect
             aria-label="2000. MetaData3, 34."
@@ -1579,7 +1582,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
                 }
             data-is-focusable={true}
             fill="#00bcf2"
-            height={0}
+            height={94.23913043478261}
+            key="0-2"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -1589,10 +1593,11 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
             role="img"
             width={-9}
             x={20}
-            y={0}
+            y={180.76086956521738}
           />
         </g>
         <g
+          key="1"
           transform="translate(-28, 0)"
         >
           <rect
@@ -1604,7 +1609,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
                 }
             data-is-focusable={true}
             fill="#0078d4"
-            height={0}
+            height={38.80434782608696}
+            key="1-0"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -1614,7 +1620,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
             role="img"
             width={-9}
             x={0}
-            y={0}
+            y={236.19565217391303}
           />
           <rect
             aria-label="2010. MetaData2, 90."
@@ -1625,7 +1631,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
                 }
             data-is-focusable={true}
             fill="#00188f"
-            height={0}
+            height={249.45652173913044}
+            key="1-1"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -1635,7 +1642,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
             role="img"
             width={-9}
             x={10}
-            y={18.80434782608696}
+            y={25.543478260869563}
           />
           <rect
             aria-label="2010. MetaData3, 33."
@@ -1646,7 +1653,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
                 }
             data-is-focusable={true}
             fill="#00bcf2"
-            height={0}
+            height={91.46739130434783}
+            key="1-2"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -1656,7 +1664,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
             role="img"
             width={-9}
             x={20}
-            y={0}
+            y={183.5326086956522}
           />
         </g>
       </g>
@@ -1732,6 +1740,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -1822,6 +1831,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="1"
                   role="none"
                 >
                   <button
@@ -1912,6 +1922,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders GroupedVerticalBarChar
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="2"
                   role="none"
                 >
                   <button
@@ -2024,7 +2035,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
         overflow: hidden;
         width: 100%;
       }
-  id="chart_16"
+  id="chart_2"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2037,13 +2048,13 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone17"
+    data-focuszone-id="FocusZone3"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -2077,8 +2088,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
             & path {
               display: none;
             }
-        id="xAxisGElementchart_16"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_2"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -2105,11 +2116,12 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_16"
+        id="yAxisGElementchart_2"
         transform="translate(40, 0)"
       />
       <g>
         <g
+          key="0"
           transform="translate(19, 0)"
         >
           <rect
@@ -2121,7 +2133,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
                 }
             data-is-focusable={true}
             fill="#0078d4"
-            height={0}
+            height={182.93478260869566}
+            key="0-0"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -2131,7 +2144,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
             role="img"
             width={-9}
             x={0}
-            y={4.45652173913043}
+            y={92.06521739130434}
           />
           <rect
             aria-label="2000. MetaData2, 13."
@@ -2142,7 +2155,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
                 }
             data-is-focusable={true}
             fill="#00188f"
-            height={0}
+            height={36.03260869565217}
+            key="0-1"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -2152,7 +2166,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
             role="img"
             width={-9}
             x={10}
-            y={0}
+            y={238.9673913043478}
           />
           <rect
             aria-label="2000. MetaData3, 34."
@@ -2163,7 +2177,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
                 }
             data-is-focusable={true}
             fill="#00bcf2"
-            height={0}
+            height={94.23913043478261}
+            key="0-2"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -2173,10 +2188,11 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
             role="img"
             width={-9}
             x={20}
-            y={0}
+            y={180.76086956521738}
           />
         </g>
         <g
+          key="1"
           transform="translate(-28, 0)"
         >
           <rect
@@ -2188,7 +2204,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
                 }
             data-is-focusable={true}
             fill="#0078d4"
-            height={0}
+            height={38.80434782608696}
+            key="1-0"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -2198,7 +2215,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
             role="img"
             width={-9}
             x={0}
-            y={0}
+            y={236.19565217391303}
           />
           <rect
             aria-label="2010. MetaData2, 90."
@@ -2209,7 +2226,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
                 }
             data-is-focusable={true}
             fill="#00188f"
-            height={0}
+            height={249.45652173913044}
+            key="1-1"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -2219,7 +2237,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
             role="img"
             width={-9}
             x={10}
-            y={18.80434782608696}
+            y={25.543478260869563}
           />
           <rect
             aria-label="2010. MetaData3, 33."
@@ -2230,7 +2248,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
                 }
             data-is-focusable={true}
             fill="#00bcf2"
-            height={0}
+            height={91.46739130434783}
+            key="1-2"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -2240,7 +2259,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
             role="img"
             width={-9}
             x={20}
-            y={0}
+            y={183.5326086956522}
           />
         </g>
       </g>
@@ -2275,7 +2294,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone18"
+        data-focuszone-id="FocusZone4"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2299,6 +2318,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
                   display: inherit;
                   flex-shrink: 0;
                 }
+            key="0"
             role="none"
           >
             <button
@@ -2389,6 +2409,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
                   display: inherit;
                   flex-shrink: 0;
                 }
+            key="1"
             role="none"
           >
             <button
@@ -2479,6 +2500,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders enabledLegendsWrapLine
                   display: inherit;
                   flex-shrink: 0;
                 }
+            key="2"
             role="none"
           >
             <button
@@ -2588,7 +2610,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
         overflow: hidden;
         width: 100%;
       }
-  id="chart_7"
+  id="chart_2"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2601,13 +2623,13 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone8"
+    data-focuszone-id="FocusZone3"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
-      height={0}
+      height={350}
       style={
         Object {
           "display": "block",
@@ -2641,8 +2663,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
             & path {
               display: none;
             }
-        id="xAxisGElementchart_7"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_2"
+        transform="translate(0, 315)"
       />
       <g
         className=
@@ -2669,11 +2691,12 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_7"
+        id="yAxisGElementchart_2"
         transform="translate(40, 0)"
       />
       <g>
         <g
+          key="0"
           transform="translate(19, 0)"
         >
           <rect
@@ -2685,7 +2708,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
                 }
             data-is-focusable={true}
             fill="#0078d4"
-            height={0}
+            height={211.6304347826087}
+            key="0-0"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -2695,7 +2719,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
             role="img"
             width={-9}
             x={0}
-            y={4.45652173913043}
+            y={103.36956521739131}
           />
           <rect
             aria-label="2000. MetaData2, 13."
@@ -2706,7 +2730,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
                 }
             data-is-focusable={true}
             fill="#00188f"
-            height={0}
+            height={41.68478260869565}
+            key="0-1"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -2716,7 +2741,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
             role="img"
             width={-9}
             x={10}
-            y={0}
+            y={273.3152173913044}
           />
           <rect
             aria-label="2000. MetaData3, 34."
@@ -2727,7 +2752,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
                 }
             data-is-focusable={true}
             fill="#00bcf2"
-            height={0}
+            height={109.02173913043478}
+            key="0-2"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -2737,10 +2763,11 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
             role="img"
             width={-9}
             x={20}
-            y={0}
+            y={205.97826086956522}
           />
         </g>
         <g
+          key="1"
           transform="translate(-28, 0)"
         >
           <rect
@@ -2752,7 +2779,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
                 }
             data-is-focusable={true}
             fill="#0078d4"
-            height={0}
+            height={44.89130434782609}
+            key="1-0"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -2762,7 +2790,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
             role="img"
             width={-9}
             x={0}
-            y={0}
+            y={270.1086956521739}
           />
           <rect
             aria-label="2010. MetaData2, 90."
@@ -2773,7 +2801,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
                 }
             data-is-focusable={true}
             fill="#00188f"
-            height={0}
+            height={288.5869565217391}
+            key="1-1"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -2783,7 +2812,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
             role="img"
             width={-9}
             x={10}
-            y={18.80434782608696}
+            y={26.413043478260875}
           />
           <rect
             aria-label="2010. MetaData3, 33."
@@ -2794,7 +2823,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
                 }
             data-is-focusable={true}
             fill="#00bcf2"
-            height={0}
+            height={105.81521739130434}
+            key="1-2"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -2804,7 +2834,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideLegend correctly 1
             role="img"
             width={-9}
             x={20}
-            y={0}
+            y={209.18478260869566}
           />
         </g>
       </g>
@@ -2832,7 +2862,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
         overflow: hidden;
         width: 100%;
       }
-  id="chart_11"
+  id="chart_2"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2845,13 +2875,13 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone12"
+    data-focuszone-id="FocusZone3"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -2885,8 +2915,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
             & path {
               display: none;
             }
-        id="xAxisGElementchart_11"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_2"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -2913,11 +2943,12 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_11"
+        id="yAxisGElementchart_2"
         transform="translate(40, 0)"
       />
       <g>
         <g
+          key="0"
           transform="translate(19, 0)"
         >
           <rect
@@ -2929,7 +2960,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
                 }
             data-is-focusable={false}
             fill="#0078d4"
-            height={0}
+            height={182.93478260869566}
+            key="0-0"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -2939,7 +2971,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
             role="img"
             width={-9}
             x={0}
-            y={4.45652173913043}
+            y={92.06521739130434}
           />
           <rect
             aria-label="2000. MetaData2, 13."
@@ -2950,7 +2982,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
                 }
             data-is-focusable={false}
             fill="#00188f"
-            height={0}
+            height={36.03260869565217}
+            key="0-1"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -2960,7 +2993,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
             role="img"
             width={-9}
             x={10}
-            y={0}
+            y={238.9673913043478}
           />
           <rect
             aria-label="2000. MetaData3, 34."
@@ -2971,7 +3004,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
                 }
             data-is-focusable={false}
             fill="#00bcf2"
-            height={0}
+            height={94.23913043478261}
+            key="0-2"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -2981,10 +3015,11 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
             role="img"
             width={-9}
             x={20}
-            y={0}
+            y={180.76086956521738}
           />
         </g>
         <g
+          key="1"
           transform="translate(-28, 0)"
         >
           <rect
@@ -2996,7 +3031,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
                 }
             data-is-focusable={false}
             fill="#0078d4"
-            height={0}
+            height={38.80434782608696}
+            key="1-0"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -3006,7 +3042,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
             role="img"
             width={-9}
             x={0}
-            y={0}
+            y={236.19565217391303}
           />
           <rect
             aria-label="2010. MetaData2, 90."
@@ -3017,7 +3053,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
                 }
             data-is-focusable={false}
             fill="#00188f"
-            height={0}
+            height={249.45652173913044}
+            key="1-1"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -3027,7 +3064,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
             role="img"
             width={-9}
             x={10}
-            y={18.80434782608696}
+            y={25.543478260869563}
           />
           <rect
             aria-label="2010. MetaData3, 33."
@@ -3038,7 +3075,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
                 }
             data-is-focusable={false}
             fill="#00bcf2"
-            height={0}
+            height={91.46739130434783}
+            key="1-2"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -3048,7 +3086,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
             role="img"
             width={-9}
             x={20}
-            y={0}
+            y={183.5326086956522}
           />
         </g>
       </g>
@@ -3100,7 +3138,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone13"
+              data-focuszone-id="FocusZone4"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3124,6 +3162,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -3214,6 +3253,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="1"
                   role="none"
                 >
                   <button
@@ -3304,6 +3344,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders hideTooltip correctly
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="2"
                   role="none"
                 >
                   <button
@@ -3416,7 +3457,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
         overflow: hidden;
         width: 100%;
       }
-  id="chart_21"
+  id="chart_2"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3429,13 +3470,13 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone22"
+    data-focuszone-id="FocusZone3"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -3469,8 +3510,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
             & path {
               display: none;
             }
-        id="xAxisGElementchart_21"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_2"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -3497,11 +3538,12 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_21"
+        id="yAxisGElementchart_2"
         transform="translate(40, 0)"
       />
       <g>
         <g
+          key="0"
           transform="translate(19, 0)"
         >
           <rect
@@ -3513,7 +3555,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
                 }
             data-is-focusable={true}
             fill="#0078d4"
-            height={0}
+            height={182.93478260869566}
+            key="0-0"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -3523,7 +3566,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
             role="img"
             width={-9}
             x={0}
-            y={4.45652173913043}
+            y={92.06521739130434}
           />
           <rect
             aria-label="2000. MetaData2, 13."
@@ -3534,7 +3577,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
                 }
             data-is-focusable={true}
             fill="#00188f"
-            height={0}
+            height={36.03260869565217}
+            key="0-1"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -3544,7 +3588,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
             role="img"
             width={-9}
             x={10}
-            y={0}
+            y={238.9673913043478}
           />
           <rect
             aria-label="2000. MetaData3, 34."
@@ -3555,7 +3599,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
                 }
             data-is-focusable={true}
             fill="#00bcf2"
-            height={0}
+            height={94.23913043478261}
+            key="0-2"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -3565,10 +3610,11 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
             role="img"
             width={-9}
             x={20}
-            y={0}
+            y={180.76086956521738}
           />
         </g>
         <g
+          key="1"
           transform="translate(-28, 0)"
         >
           <rect
@@ -3580,7 +3626,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
                 }
             data-is-focusable={true}
             fill="#0078d4"
-            height={0}
+            height={38.80434782608696}
+            key="1-0"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -3590,7 +3637,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
             role="img"
             width={-9}
             x={0}
-            y={0}
+            y={236.19565217391303}
           />
           <rect
             aria-label="2010. MetaData2, 90."
@@ -3601,7 +3648,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
                 }
             data-is-focusable={true}
             fill="#00188f"
-            height={0}
+            height={249.45652173913044}
+            key="1-1"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -3611,7 +3659,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
             role="img"
             width={-9}
             x={10}
-            y={18.80434782608696}
+            y={25.543478260869563}
           />
           <rect
             aria-label="2010. MetaData3, 33."
@@ -3622,7 +3670,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
                 }
             data-is-focusable={true}
             fill="#00bcf2"
-            height={0}
+            height={91.46739130434783}
+            key="1-2"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -3632,7 +3681,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
             role="img"
             width={-9}
             x={20}
-            y={0}
+            y={183.5326086956522}
           />
         </g>
       </g>
@@ -3684,7 +3733,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone23"
+              data-focuszone-id="FocusZone4"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3708,6 +3757,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -3798,6 +3848,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="1"
                   role="none"
                 >
                   <button
@@ -3888,6 +3939,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders showXAxisLablesTooltip
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="2"
                   role="none"
                 >
                   <button
@@ -4000,7 +4052,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
         overflow: hidden;
         width: 100%;
       }
-  id="chart_26"
+  id="chart_2"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4013,13 +4065,13 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone27"
+    data-focuszone-id="FocusZone3"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -4053,8 +4105,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
             & path {
               display: none;
             }
-        id="xAxisGElementchart_26"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_2"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -4081,11 +4133,12 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_26"
+        id="yAxisGElementchart_2"
         transform="translate(40, 0)"
       />
       <g>
         <g
+          key="0"
           transform="translate(19, 0)"
         >
           <rect
@@ -4097,7 +4150,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
                 }
             data-is-focusable={true}
             fill="#0078d4"
-            height={0}
+            height={182.93478260869566}
+            key="0-0"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -4107,7 +4161,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
             role="img"
             width={-9}
             x={0}
-            y={4.45652173913043}
+            y={92.06521739130434}
           />
           <rect
             aria-label="2000. MetaData2, 13."
@@ -4118,7 +4172,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
                 }
             data-is-focusable={true}
             fill="#00188f"
-            height={0}
+            height={36.03260869565217}
+            key="0-1"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -4128,7 +4183,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
             role="img"
             width={-9}
             x={10}
-            y={0}
+            y={238.9673913043478}
           />
           <rect
             aria-label="2000. MetaData3, 34."
@@ -4139,7 +4194,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
                 }
             data-is-focusable={true}
             fill="#00bcf2"
-            height={0}
+            height={94.23913043478261}
+            key="0-2"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -4149,10 +4205,11 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
             role="img"
             width={-9}
             x={20}
-            y={0}
+            y={180.76086956521738}
           />
         </g>
         <g
+          key="1"
           transform="translate(-28, 0)"
         >
           <rect
@@ -4164,7 +4221,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
                 }
             data-is-focusable={true}
             fill="#0078d4"
-            height={0}
+            height={38.80434782608696}
+            key="1-0"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -4174,7 +4232,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
             role="img"
             width={-9}
             x={0}
-            y={0}
+            y={236.19565217391303}
           />
           <rect
             aria-label="2010. MetaData2, 90."
@@ -4185,7 +4243,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
                 }
             data-is-focusable={true}
             fill="#00188f"
-            height={0}
+            height={249.45652173913044}
+            key="1-1"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -4195,7 +4254,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
             role="img"
             width={-9}
             x={10}
-            y={18.80434782608696}
+            y={25.543478260869563}
           />
           <rect
             aria-label="2010. MetaData3, 33."
@@ -4206,7 +4265,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
                 }
             data-is-focusable={true}
             fill="#00bcf2"
-            height={0}
+            height={91.46739130434783}
+            key="1-2"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -4216,7 +4276,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
             role="img"
             width={-9}
             x={20}
-            y={0}
+            y={183.5326086956522}
           />
         </g>
       </g>
@@ -4268,7 +4328,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone28"
+              data-focuszone-id="FocusZone4"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4292,6 +4352,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -4382,6 +4443,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="1"
                   role="none"
                 >
                   <button
@@ -4472,6 +4534,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders wrapXAxisLables correc
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="2"
                   role="none"
                 >
                   <button
@@ -4584,7 +4647,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
         overflow: hidden;
         width: 100%;
       }
-  id="chart_31"
+  id="chart_2"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -4597,13 +4660,13 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone32"
+    data-focuszone-id="FocusZone3"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -4637,8 +4700,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
             & path {
               display: none;
             }
-        id="xAxisGElementchart_31"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_2"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -4665,11 +4728,12 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_31"
+        id="yAxisGElementchart_2"
         transform="translate(40, 0)"
       />
       <g>
         <g
+          key="0"
           transform="translate(19, 0)"
         >
           <rect
@@ -4681,7 +4745,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
                 }
             data-is-focusable={true}
             fill="#0078d4"
-            height={0}
+            height={182.93478260869566}
+            key="0-0"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -4691,7 +4756,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
             role="img"
             width={-9}
             x={0}
-            y={4.45652173913043}
+            y={92.06521739130434}
           />
           <rect
             aria-label="2000. MetaData2, 13."
@@ -4702,7 +4767,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
                 }
             data-is-focusable={true}
             fill="#00188f"
-            height={0}
+            height={36.03260869565217}
+            key="0-1"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -4712,7 +4778,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
             role="img"
             width={-9}
             x={10}
-            y={0}
+            y={238.9673913043478}
           />
           <rect
             aria-label="2000. MetaData3, 34."
@@ -4723,7 +4789,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
                 }
             data-is-focusable={true}
             fill="#00bcf2"
-            height={0}
+            height={94.23913043478261}
+            key="0-2"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -4733,10 +4800,11 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
             role="img"
             width={-9}
             x={20}
-            y={0}
+            y={180.76086956521738}
           />
         </g>
         <g
+          key="1"
           transform="translate(-28, 0)"
         >
           <rect
@@ -4748,7 +4816,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
                 }
             data-is-focusable={true}
             fill="#0078d4"
-            height={0}
+            height={38.80434782608696}
+            key="1-0"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -4758,7 +4827,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
             role="img"
             width={-9}
             x={0}
-            y={0}
+            y={236.19565217391303}
           />
           <rect
             aria-label="2010. MetaData2, 90."
@@ -4769,7 +4838,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
                 }
             data-is-focusable={true}
             fill="#00188f"
-            height={0}
+            height={249.45652173913044}
+            key="1-1"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -4779,7 +4849,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
             role="img"
             width={-9}
             x={10}
-            y={18.80434782608696}
+            y={25.543478260869563}
           />
           <rect
             aria-label="2010. MetaData3, 33."
@@ -4790,7 +4860,8 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
                 }
             data-is-focusable={true}
             fill="#00bcf2"
-            height={0}
+            height={91.46739130434783}
+            key="1-2"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -4800,7 +4871,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
             role="img"
             width={-9}
             x={20}
-            y={0}
+            y={183.5326086956522}
           />
         </g>
       </g>
@@ -4852,7 +4923,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone33"
+              data-focuszone-id="FocusZone4"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -4876,6 +4947,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -4966,6 +5038,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="1"
                   role="none"
                 >
                   <button
@@ -5056,6 +5129,7 @@ exports[`GroupedVerticalBarChart snapShot testing renders yAxisTickFormat correc
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="2"
                   role="none"
                 >
                   <button
diff --git a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.test.tsx b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.test.tsx
index 188f681732d713..8b9bf26628c2f1 100644
--- a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.test.tsx
+++ b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.test.tsx
@@ -1,6 +1,5 @@
 jest.mock('react-dom');
 import * as React from 'react';
-import * as renderer from 'react-test-renderer';
 import { mount, ReactWrapper } from 'enzyme';
 import toJson from 'enzyme-to-json';
 
@@ -10,9 +9,15 @@ import { IHeatMapChartState, HeatMapChartBase } from './HeatMapChart.base';
 
 // Wrapper of the HeatMapChart to be tested.
 let wrapper: ReactWrapper<IHeatMapChartProps, IHeatMapChartState, HeatMapChartBase> | undefined;
+const originalRAF = window.requestAnimationFrame;
 
 function sharedBeforeEach() {
   resetIds();
+  jest.useFakeTimers();
+  Object.defineProperty(window, 'requestAnimationFrame', {
+    writable: true,
+    value: (callback: FrameRequestCallback) => callback(0),
+  });
 }
 
 function sharedAfterEach() {
@@ -27,6 +32,8 @@ function sharedAfterEach() {
   if ((global.setTimeout as any).mock) {
     jest.useRealTimers();
   }
+  jest.useRealTimers();
+  window.requestAnimationFrame = originalRAF;
 }
 const yPoint: string[] = ['p1', 'p2'];
 
@@ -89,32 +96,52 @@ const HeatMapData2: IHeatMapChartProps['data'] = [
 ];
 
 describe('HeatMapChart snapShot testing', () => {
-  it('renders HeatMapChart correctly', () => {
-    const component = renderer.create(
+  beforeEach(() => {
+    resetIds();
+  });
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount();
+      wrapper = undefined;
+    }
+
+    // Do this after unmounting the wrapper to make sure if any timers cleaned up on unmount are
+    // cleaned up in fake timers world
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if ((global.setTimeout as any).mock) {
+      jest.useRealTimers();
+    }
+  });
+  it('renders HeatMapChart correctly', async () => {
+    wrapper = mount(
       <HeatMapChart
         data={HeatMapData}
         domainValuesForColorScale={[0, 600]}
         rangeValuesForColorScale={['lightblue', 'darkblue']}
       />,
     );
-    const tree = component.toJSON();
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders corretly even when data is not present for some group', () => {
-    const component = renderer.create(
+  it('renders corretly even when data is not present for some group', async () => {
+    wrapper = mount(
       <HeatMapChart
         data={HeatMapData2} // first group has no data in it
         domainValuesForColorScale={[0, 600]}
         rangeValuesForColorScale={['pink', 'yellow']}
       />,
     );
-    const tree = component.toJSON();
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders hideLegend correctly', () => {
-    const component = renderer.create(
+  it('renders hideLegend correctly', async () => {
+    wrapper = mount(
       <HeatMapChart
         data={HeatMapData}
         hideLegend={true}
@@ -122,12 +149,14 @@ describe('HeatMapChart snapShot testing', () => {
         rangeValuesForColorScale={['lightblue', 'darkblue']}
       />,
     );
-    const tree = component.toJSON();
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders hideTooltip correctly', () => {
-    const component = renderer.create(
+  it('renders hideTooltip correctly', async () => {
+    wrapper = mount(
       <HeatMapChart
         data={HeatMapData}
         hideTooltip={true}
@@ -135,12 +164,14 @@ describe('HeatMapChart snapShot testing', () => {
         rangeValuesForColorScale={['lightblue', 'darkblue']}
       />,
     );
-    const tree = component.toJSON();
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders yAxisTickFormat correctly', () => {
-    const component = renderer.create(
+  it('renders yAxisTickFormat correctly', async () => {
+    wrapper = mount(
       <HeatMapChart
         data={HeatMapData}
         yAxisTickFormat={'/%d'}
@@ -148,7 +179,9 @@ describe('HeatMapChart snapShot testing', () => {
         rangeValuesForColorScale={['lightblue', 'darkblue']}
       />,
     );
-    const tree = component.toJSON();
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 });
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 b7ccb5f99e720d..92ee1fa981fcfb 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
@@ -35,7 +35,7 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove
     onMouseDownCapture={[Function]}
   >
     <svg
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -70,7 +70,7 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove
               display: none;
             }
         id="xAxisGElementchart_0"
-        transform="translate(0, -35)"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -111,11 +111,11 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove
         onMouseOut={[Function]}
         onMouseOver={[Function]}
         role="img"
-        transform="translate(-19.405940594059405, -7.227722772277229)"
+        transform="translate(-19.405940594059405, 22.52475247524754)"
       >
         <rect
           fill="rgb(166, 207, 226)"
-          height={26.683168316831683}
+          height={123.7128712871287}
           width={29.10891089108911}
         />
         <text
@@ -132,7 +132,7 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove
               }
           dominantBaseline="middle"
           textAnchor="middle"
-          transform="translate(14.554455445544555, 13.341584158415841)"
+          transform="translate(14.554455445544555, 61.85643564356435)"
         >
           25
         </text>
@@ -147,11 +147,11 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove
         onMouseOut={[Function]}
         onMouseOver={[Function]}
         role="img"
-        transform="translate(10.297029702970299, -34.45544554455446)"
+        transform="translate(10.297029702970299, 148.76237623762376)"
       >
         <rect
           fill="rgb(159, 198, 222)"
-          height={26.683168316831683}
+          height={123.7128712871287}
           width={29.10891089108911}
         />
         <text
@@ -168,7 +168,7 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove
               }
           dominantBaseline="middle"
           textAnchor="middle"
-          transform="translate(14.554455445544555, 13.341584158415841)"
+          transform="translate(14.554455445544555, 61.85643564356435)"
         >
           50
         </text>
@@ -206,12 +206,6 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove
         >
           <div
             data-automation-id="visibleContent"
-            style={
-              Object {
-                "position": "fixed",
-                "visibility": "hidden",
-              }
-            }
           >
             <div
               aria-label="Legends"
@@ -369,14 +363,20 @@ exports[`HeatMapChart - mouse events Should render callout correctly on mouseove
           &::-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="10"
       style={
         Object {
-          "filter": "opacity(0)",
-          "opacity": 0,
-          "pointerEvents": "none",
+          "left": 8,
+          "maxHeight": 752,
+          "top": 8,
         }
       }
       tabIndex={-1}
@@ -592,7 +592,7 @@ exports[`HeatMapChart snapShot testing renders HeatMapChart correctly 1`] = `
     onMouseDownCapture={[Function]}
   >
     <svg
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -627,7 +627,7 @@ exports[`HeatMapChart snapShot testing renders HeatMapChart correctly 1`] = `
               display: none;
             }
         id="xAxisGElementchart_0"
-        transform="translate(0, -35)"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -662,16 +662,17 @@ exports[`HeatMapChart snapShot testing renders HeatMapChart correctly 1`] = `
         off and people of alaska are hoping for more of this days."
         data-is-focusable={true}
         fillOpacity="1"
+        key="00"
         onBlur={[Function]}
         onFocus={[Function]}
         onMouseOut={[Function]}
         onMouseOver={[Function]}
         role="img"
-        transform="translate(-19.405940594059405, -7.227722772277229)"
+        transform="translate(-19.405940594059405, 22.52475247524754)"
       >
         <rect
           fill="rgb(166, 207, 226)"
-          height={26.683168316831683}
+          height={123.7128712871287}
           width={29.10891089108911}
         />
         <text
@@ -688,7 +689,7 @@ exports[`HeatMapChart snapShot testing renders HeatMapChart correctly 1`] = `
               }
           dominantBaseline="middle"
           textAnchor="middle"
-          transform="translate(14.554455445544555, 13.341584158415841)"
+          transform="translate(14.554455445544555, 61.85643564356435)"
         >
           25
         </text>
@@ -697,16 +698,17 @@ exports[`HeatMapChart snapShot testing renders HeatMapChart correctly 1`] = `
         aria-label="Mar/03, p1. Execllent (0-200), 50/2391. a good day to start with in Texas with best air quality."
         data-is-focusable={true}
         fillOpacity="1"
+        key="10"
         onBlur={[Function]}
         onFocus={[Function]}
         onMouseOut={[Function]}
         onMouseOver={[Function]}
         role="img"
-        transform="translate(10.297029702970299, -34.45544554455446)"
+        transform="translate(10.297029702970299, 148.76237623762376)"
       >
         <rect
           fill="rgb(159, 198, 222)"
-          height={26.683168316831683}
+          height={123.7128712871287}
           width={29.10891089108911}
         />
         <text
@@ -723,7 +725,7 @@ exports[`HeatMapChart snapShot testing renders HeatMapChart correctly 1`] = `
               }
           dominantBaseline="middle"
           textAnchor="middle"
-          transform="translate(14.554455445544555, 13.341584158415841)"
+          transform="translate(14.554455445544555, 61.85643564356435)"
         >
           50
         </text>
@@ -800,6 +802,7 @@ exports[`HeatMapChart snapShot testing renders HeatMapChart correctly 1`] = `
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -912,7 +915,7 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr
         overflow: hidden;
         width: 100%;
       }
-  id="chart_3"
+  id="chart_0"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -925,13 +928,13 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone4"
+    data-focuszone-id="FocusZone1"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -965,8 +968,8 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr
             & path {
               display: none;
             }
-        id="xAxisGElementchart_3"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_0"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -993,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_3"
+        id="yAxisGElementchart_0"
         transform="translate(40, 0)"
       />
       <g
@@ -1001,16 +1004,17 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr
       off and people of alaska are hoping for more of this days."
         data-is-focusable={true}
         fillOpacity="1"
+        key="00"
         onBlur={[Function]}
         onFocus={[Function]}
         onMouseOut={[Function]}
         onMouseOver={[Function]}
         role="img"
-        transform="translate(-19.405940594059405, -7.227722772277229)"
+        transform="translate(-19.405940594059405, 22.52475247524754)"
       >
         <rect
           fill="rgb(255, 195, 195)"
-          height={26.683168316831683}
+          height={123.7128712871287}
           width={29.10891089108911}
         />
         <text
@@ -1027,7 +1031,7 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr
               }
           dominantBaseline="middle"
           textAnchor="middle"
-          transform="translate(14.554455445544555, 13.341584158415841)"
+          transform="translate(14.554455445544555, 61.85643564356435)"
         >
           25
         </text>
@@ -1036,16 +1040,17 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr
         aria-label="Mar/03, p1. Nasty, 50/2391. a good day to start with in Texas with best air quality."
         data-is-focusable={true}
         fillOpacity="1"
+        key="10"
         onBlur={[Function]}
         onFocus={[Function]}
         onMouseOut={[Function]}
         onMouseOver={[Function]}
         role="img"
-        transform="translate(10.297029702970299, -34.45544554455446)"
+        transform="translate(10.297029702970299, 148.76237623762376)"
       >
         <rect
           fill="rgb(255, 197, 186)"
-          height={26.683168316831683}
+          height={123.7128712871287}
           width={29.10891089108911}
         />
         <text
@@ -1062,7 +1067,7 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr
               }
           dominantBaseline="middle"
           textAnchor="middle"
-          transform="translate(14.554455445544555, 13.341584158415841)"
+          transform="translate(14.554455445544555, 61.85643564356435)"
         >
           50
         </text>
@@ -1115,7 +1120,7 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone5"
+              data-focuszone-id="FocusZone2"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1139,6 +1144,7 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -1229,6 +1235,7 @@ exports[`HeatMapChart snapShot testing renders corretly even when data is not pr
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="1"
                   role="none"
                 >
                   <button
@@ -1341,7 +1348,7 @@ exports[`HeatMapChart snapShot testing renders hideLegend correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_6"
+  id="chart_0"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1354,13 +1361,13 @@ exports[`HeatMapChart snapShot testing renders hideLegend correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone7"
+    data-focuszone-id="FocusZone1"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
-      height={0}
+      height={350}
       style={
         Object {
           "display": "block",
@@ -1394,8 +1401,8 @@ exports[`HeatMapChart snapShot testing renders hideLegend correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_6"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_0"
+        transform="translate(0, 315)"
       />
       <g
         className=
@@ -1422,7 +1429,7 @@ exports[`HeatMapChart snapShot testing renders hideLegend correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_6"
+        id="yAxisGElementchart_0"
         transform="translate(40, 0)"
       />
       <g
@@ -1430,16 +1437,17 @@ exports[`HeatMapChart snapShot testing renders hideLegend correctly 1`] = `
         off and people of alaska are hoping for more of this days."
         data-is-focusable={true}
         fillOpacity="1"
+        key="00"
         onBlur={[Function]}
         onFocus={[Function]}
         onMouseOut={[Function]}
         onMouseOver={[Function]}
         role="img"
-        transform="translate(-19.405940594059405, -7.227722772277229)"
+        transform="translate(-19.405940594059405, 22.9207920792079)"
       >
         <rect
           fill="rgb(166, 207, 226)"
-          height={26.683168316831683}
+          height={143.11881188118812}
           width={29.10891089108911}
         />
         <text
@@ -1456,7 +1464,7 @@ exports[`HeatMapChart snapShot testing renders hideLegend correctly 1`] = `
               }
           dominantBaseline="middle"
           textAnchor="middle"
-          transform="translate(14.554455445544555, 13.341584158415841)"
+          transform="translate(14.554455445544555, 71.55940594059406)"
         >
           25
         </text>
@@ -1465,16 +1473,17 @@ exports[`HeatMapChart snapShot testing renders hideLegend correctly 1`] = `
         aria-label="Mar/03, p1. Execllent (0-200), 50/2391. a good day to start with in Texas with best air quality."
         data-is-focusable={true}
         fillOpacity="1"
+        key="10"
         onBlur={[Function]}
         onFocus={[Function]}
         onMouseOut={[Function]}
         onMouseOver={[Function]}
         role="img"
-        transform="translate(10.297029702970299, -34.45544554455446)"
+        transform="translate(10.297029702970299, 168.96039603960395)"
       >
         <rect
           fill="rgb(159, 198, 222)"
-          height={26.683168316831683}
+          height={143.11881188118812}
           width={29.10891089108911}
         />
         <text
@@ -1491,7 +1500,7 @@ exports[`HeatMapChart snapShot testing renders hideLegend correctly 1`] = `
               }
           dominantBaseline="middle"
           textAnchor="middle"
-          transform="translate(14.554455445544555, 13.341584158415841)"
+          transform="translate(14.554455445544555, 71.55940594059406)"
         >
           50
         </text>
@@ -1520,7 +1529,7 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_8"
+  id="chart_0"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1533,13 +1542,13 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone9"
+    data-focuszone-id="FocusZone1"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -1573,8 +1582,8 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_8"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_0"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -1601,7 +1610,7 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_8"
+        id="yAxisGElementchart_0"
         transform="translate(40, 0)"
       />
       <g
@@ -1609,16 +1618,17 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = `
         off and people of alaska are hoping for more of this days."
         data-is-focusable={true}
         fillOpacity="1"
+        key="00"
         onBlur={[Function]}
         onFocus={[Function]}
         onMouseOut={[Function]}
         onMouseOver={[Function]}
         role="img"
-        transform="translate(-19.405940594059405, -7.227722772277229)"
+        transform="translate(-19.405940594059405, 22.52475247524754)"
       >
         <rect
           fill="rgb(166, 207, 226)"
-          height={26.683168316831683}
+          height={123.7128712871287}
           width={29.10891089108911}
         />
         <text
@@ -1635,7 +1645,7 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = `
               }
           dominantBaseline="middle"
           textAnchor="middle"
-          transform="translate(14.554455445544555, 13.341584158415841)"
+          transform="translate(14.554455445544555, 61.85643564356435)"
         >
           25
         </text>
@@ -1644,16 +1654,17 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = `
         aria-label="Mar/03, p1. Execllent (0-200), 50/2391. a good day to start with in Texas with best air quality."
         data-is-focusable={true}
         fillOpacity="1"
+        key="10"
         onBlur={[Function]}
         onFocus={[Function]}
         onMouseOut={[Function]}
         onMouseOver={[Function]}
         role="img"
-        transform="translate(10.297029702970299, -34.45544554455446)"
+        transform="translate(10.297029702970299, 148.76237623762376)"
       >
         <rect
           fill="rgb(159, 198, 222)"
-          height={26.683168316831683}
+          height={123.7128712871287}
           width={29.10891089108911}
         />
         <text
@@ -1670,7 +1681,7 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = `
               }
           dominantBaseline="middle"
           textAnchor="middle"
-          transform="translate(14.554455445544555, 13.341584158415841)"
+          transform="translate(14.554455445544555, 61.85643564356435)"
         >
           50
         </text>
@@ -1723,7 +1734,7 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone10"
+              data-focuszone-id="FocusZone2"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1747,6 +1758,7 @@ exports[`HeatMapChart snapShot testing renders hideTooltip correctly 1`] = `
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -1859,7 +1871,7 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_11"
+  id="chart_0"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1872,13 +1884,13 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone12"
+    data-focuszone-id="FocusZone1"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
@@ -1912,8 +1924,8 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_11"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_0"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -1940,7 +1952,7 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_11"
+        id="yAxisGElementchart_0"
         transform="translate(40, 0)"
       />
       <g
@@ -1948,16 +1960,17 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         off and people of alaska are hoping for more of this days."
         data-is-focusable={true}
         fillOpacity="1"
+        key="00"
         onBlur={[Function]}
         onFocus={[Function]}
         onMouseOut={[Function]}
         onMouseOver={[Function]}
         role="img"
-        transform="translate(-19.405940594059405, -7.227722772277229)"
+        transform="translate(-19.405940594059405, 22.52475247524754)"
       >
         <rect
           fill="rgb(166, 207, 226)"
-          height={26.683168316831683}
+          height={123.7128712871287}
           width={29.10891089108911}
         />
         <text
@@ -1974,7 +1987,7 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = `
               }
           dominantBaseline="middle"
           textAnchor="middle"
-          transform="translate(14.554455445544555, 13.341584158415841)"
+          transform="translate(14.554455445544555, 61.85643564356435)"
         >
           25
         </text>
@@ -1983,16 +1996,17 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         aria-label="Mar/03, p1. Execllent (0-200), 50/2391. a good day to start with in Texas with best air quality."
         data-is-focusable={true}
         fillOpacity="1"
+        key="10"
         onBlur={[Function]}
         onFocus={[Function]}
         onMouseOut={[Function]}
         onMouseOver={[Function]}
         role="img"
-        transform="translate(10.297029702970299, -34.45544554455446)"
+        transform="translate(10.297029702970299, 148.76237623762376)"
       >
         <rect
           fill="rgb(159, 198, 222)"
-          height={26.683168316831683}
+          height={123.7128712871287}
           width={29.10891089108911}
         />
         <text
@@ -2009,7 +2023,7 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = `
               }
           dominantBaseline="middle"
           textAnchor="middle"
-          transform="translate(14.554455445544555, 13.341584158415841)"
+          transform="translate(14.554455445544555, 61.85643564356435)"
         >
           50
         </text>
@@ -2062,7 +2076,7 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone13"
+              data-focuszone-id="FocusZone2"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2086,6 +2100,7 @@ exports[`HeatMapChart snapShot testing renders yAxisTickFormat correctly 1`] = `
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
diff --git a/packages/react-charting/src/components/LineChart/LineChart.base.tsx b/packages/react-charting/src/components/LineChart/LineChart.base.tsx
index e8d1713f0ca65a..511ea301d4b1bf 100644
--- a/packages/react-charting/src/components/LineChart/LineChart.base.tsx
+++ b/packages/react-charting/src/components/LineChart/LineChart.base.tsx
@@ -170,6 +170,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
   private _rectId: string;
   private _staticHighlightCircle: string;
   private _createLegendsMemoized: (data: LineChartDataWithIndex[]) => JSX.Element;
+  private _firstRenderOptimization: boolean;
 
   constructor(props: ILineChartProps) {
     super(props);
@@ -201,6 +202,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
     this._rectId = getId('containerRectLD');
     this._staticHighlightCircle = getId('staticHighlightCircle');
     this._createLegendsMemoized = memoizeFunction((data: LineChartDataWithIndex[]) => this._createLegends(data));
+    this._firstRenderOptimization = true;
 
     props.eventAnnotationProps &&
       props.eventAnnotationProps.labelHeight &&
@@ -285,6 +287,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
         xAxisType={isXAxisDateType ? XAxisTypes.DateAxis : XAxisTypes.NumericAxis}
         customizedCallout={this._getCustomizedCallout()}
         onChartMouseLeave={this._handleChartMouseLeave}
+        enableFirstRenderOptimization={this.props.enablePerfOptimization && this._firstRenderOptimization}
         /* eslint-disable react/jsx-no-bind */
         // eslint-disable-next-line react/no-children-prop
         children={(props: IChildProps) => {
diff --git a/packages/react-charting/src/components/LineChart/LineChart.test.tsx b/packages/react-charting/src/components/LineChart/LineChart.test.tsx
index 074435cb7b806a..74db68b8bd3e1a 100644
--- a/packages/react-charting/src/components/LineChart/LineChart.test.tsx
+++ b/packages/react-charting/src/components/LineChart/LineChart.test.tsx
@@ -1,7 +1,6 @@
 jest.mock('react-dom');
 import * as React from 'react';
 import { resetIds } from '../../Utilities';
-import * as renderer from 'react-test-renderer';
 import { mount, ReactWrapper } from 'enzyme';
 import { ILineChartPoints, ILineChartProps, LineChart } from './index';
 import { ILineChartState, LineChartBase } from './LineChart.base';
@@ -10,9 +9,15 @@ import toJson from 'enzyme-to-json';
 
 // Wrapper of the LineChart to be tested.
 let wrapper: ReactWrapper<ILineChartProps, ILineChartState, LineChartBase> | undefined;
+const originalRAF = window.requestAnimationFrame;
 
 function sharedBeforeEach() {
   resetIds();
+  jest.useFakeTimers();
+  Object.defineProperty(window, 'requestAnimationFrame', {
+    writable: true,
+    value: (callback: FrameRequestCallback) => callback(0),
+  });
 }
 
 function sharedAfterEach() {
@@ -27,6 +32,8 @@ function sharedAfterEach() {
   if ((global.setTimeout as any).mock) {
     jest.useRealTimers();
   }
+  jest.useRealTimers();
+  window.requestAnimationFrame = originalRAF;
 }
 
 const points: ILineChartPoints[] = [
@@ -50,54 +57,98 @@ const emptyChartPoints = {
 };
 
 describe('LineChart snapShot testing', () => {
-  it('renders LineChart correctly', () => {
-    const component = renderer.create(<LineChart data={chartPoints} />);
-    const tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
+  beforeEach(() => {
+    resetIds();
   });
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount();
+      wrapper = undefined;
+    }
 
-  it('renders hideLegend correctly', () => {
-    const component = renderer.create(<LineChart data={chartPoints} hideLegend={true} />);
-    const tree = component.toJSON();
+    // Do this after unmounting the wrapper to make sure if any timers cleaned up on unmount are
+    // cleaned up in fake timers world
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if ((global.setTimeout as any).mock) {
+      jest.useRealTimers();
+    }
+  });
+  it('renders LineChart correctly', async () => {
+    wrapper = mount(<LineChart data={chartPoints} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders hideTooltip correctly', () => {
-    const component = renderer.create(<LineChart data={chartPoints} hideTooltip={true} />);
-    const tree = component.toJSON();
+  it('renders hideLegend correctly', async () => {
+    wrapper = mount(<LineChart data={chartPoints} hideLegend={true} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders enabledLegendsWrapLines correctly', () => {
-    const component = renderer.create(<LineChart data={chartPoints} enabledLegendsWrapLines={true} />);
-    const tree = component.toJSON();
+  it('renders hideTooltip correctly', async () => {
+    wrapper = mount(<LineChart data={chartPoints} hideTooltip={true} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders showXAxisLablesTooltip correctly', () => {
-    const component = renderer.create(<LineChart data={chartPoints} showXAxisLablesTooltip={true} />);
-    const tree = component.toJSON();
+  it('renders enabledLegendsWrapLines correctly', async () => {
+    wrapper = mount(<LineChart data={chartPoints} enabledLegendsWrapLines={true} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders wrapXAxisLables correctly', () => {
-    const component = renderer.create(<LineChart data={chartPoints} wrapXAxisLables={true} />);
-    const tree = component.toJSON();
+  it('renders showXAxisLablesTooltip correctly', async () => {
+    wrapper = mount(<LineChart data={chartPoints} showXAxisLablesTooltip={true} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    if (wrapper) {
+      const tree = toJson(wrapper, { mode: 'deep' });
+      expect(tree).toMatchSnapshot();
+    }
+  });
+
+  it('renders wrapXAxisLables correctly', async () => {
+    const mockGetComputedTextLength = jest.fn().mockReturnValue(100);
+
+    // Replace the original method with the mock implementation
+    Object.defineProperty(
+      Object.getPrototypeOf(document.createElementNS('http://www.w3.org/2000/svg', 'tspan')),
+      'getComputedTextLength',
+      {
+        value: mockGetComputedTextLength,
+      },
+    );
+    wrapper = mount(<LineChart data={chartPoints} wrapXAxisLables={true} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper!, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders yAxisTickFormat correctly', () => {
-    const component = renderer.create(<LineChart data={chartPoints} yAxisTickFormat={'/%d'} />);
-    const tree = component.toJSON();
+  it('renders yAxisTickFormat correctly', async () => {
+    wrapper = mount(<LineChart data={chartPoints} yAxisTickFormat={'/%d'} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
   });
 
-  it('Should render with default colors when line color is not provided', () => {
+  it('Should render with default colors when line color is not provided', async () => {
     const lineColor = points[0].color;
     delete points[0].color;
 
-    const component = renderer.create(<LineChart data={chartPoints} />);
-    const tree = component.toJSON();
+    wrapper = mount(<LineChart data={chartPoints} />);
+    await new Promise(resolve => setTimeout(resolve));
+    wrapper.update();
+    const tree = toJson(wrapper, { mode: 'deep' });
     expect(tree).toMatchSnapshot();
 
     points[0].color = lineColor;
diff --git a/packages/react-charting/src/components/LineChart/LineChart.types.ts b/packages/react-charting/src/components/LineChart/LineChart.types.ts
index e05e91499fec77..e711497447d93a 100644
--- a/packages/react-charting/src/components/LineChart/LineChart.types.ts
+++ b/packages/react-charting/src/components/LineChart/LineChart.types.ts
@@ -76,6 +76,12 @@ export interface ILineChartProps extends ICartesianChartProps {
    * The prop used to define the culture to localized the numbers
    */
   culture?: string;
+
+  /**
+   * @default false
+   * The prop used to enable the perf optimization
+   */
+  enablePerfOptimization?: boolean;
 }
 export interface IEventsAnnotationProps {
   events: IEventAnnotation[];
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 0d62fa26cab2cb..2a881059711d3a 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
@@ -36,13 +36,13 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
   >
     <svg
       aria-label="LineChart"
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
         }
       }
-      width={0}
+      width={100}
     >
       <g
         className=
@@ -71,7 +71,7 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
               display: none;
             }
         id="xAxisGElementchart_8"
-        transform="translate(0, -35)"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -110,7 +110,7 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
           x1={0}
           x2={0}
           y1={0}
-          y2={0}
+          y2={310}
         />
         <g>
           <line
@@ -124,16 +124,16 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
             strokeLinecap="round"
             strokeWidth={4}
             x1={40}
-            x2={-20}
-            y1={-0.625}
+            x2={80}
+            y1={115.625}
             y2={20}
           />
           <path
             aria-label="20. metaData1, 50."
-            d="M34.5 -0.625
-     A5.5 5.5 0 1 0 45.5 -0.625
-     M34.5 -0.625
-     A 5.5 5.5 0 1 1 45.5 -0.625
+            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"
@@ -151,10 +151,10 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
           />
           <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
+            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"
@@ -205,12 +205,6 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
         >
           <div
             data-automation-id="visibleContent"
-            style={
-              Object {
-                "position": "fixed",
-                "visibility": "hidden",
-              }
-            }
           >
             <div
               aria-label="Legends"
@@ -367,14 +361,20 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
           &::-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 {
-          "filter": "opacity(0)",
-          "opacity": 0,
-          "pointerEvents": "none",
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
         }
       }
       tabIndex={-1}
@@ -560,13 +560,13 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
   >
     <svg
       aria-label="LineChart"
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
         }
       }
-      width={0}
+      width={100}
     >
       <g
         className=
@@ -595,7 +595,7 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
               display: none;
             }
         id="xAxisGElementchart_8"
-        transform="translate(0, -35)"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -634,7 +634,7 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
           x1={0}
           x2={0}
           y1={0}
-          y2={0}
+          y2={310}
         />
         <g>
           <line
@@ -648,16 +648,16 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
             strokeLinecap="round"
             strokeWidth={4}
             x1={40}
-            x2={-20}
-            y1={-0.625}
+            x2={80}
+            y1={115.625}
             y2={20}
           />
           <path
             aria-label="20. metaData1, 50."
-            d="M34.5 -0.625
-     A5.5 5.5 0 1 0 45.5 -0.625
-     M34.5 -0.625
-     A 5.5 5.5 0 1 1 45.5 -0.625
+            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"
@@ -675,10 +675,10 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
           />
           <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
+            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"
@@ -729,12 +729,6 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
         >
           <div
             data-automation-id="visibleContent"
-            style={
-              Object {
-                "position": "fixed",
-                "visibility": "hidden",
-              }
-            }
           >
             <div
               aria-label="Legends"
@@ -891,14 +885,20 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
           &::-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 {
-          "filter": "opacity(0)",
-          "opacity": 0,
-          "pointerEvents": "none",
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
         }
       }
       tabIndex={-1}
@@ -982,13 +982,13 @@ exports[`LineChart - mouse events Should render customized callout per stack on
   >
     <svg
       aria-label="LineChart"
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
         }
       }
-      width={0}
+      width={100}
     >
       <g
         className=
@@ -1017,7 +1017,7 @@ exports[`LineChart - mouse events Should render customized callout per stack on
               display: none;
             }
         id="xAxisGElementchart_8"
-        transform="translate(0, -35)"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -1056,7 +1056,7 @@ exports[`LineChart - mouse events Should render customized callout per stack on
           x1={0}
           x2={0}
           y1={0}
-          y2={0}
+          y2={310}
         />
         <g>
           <line
@@ -1070,16 +1070,16 @@ exports[`LineChart - mouse events Should render customized callout per stack on
             strokeLinecap="round"
             strokeWidth={4}
             x1={40}
-            x2={-20}
-            y1={-0.625}
+            x2={80}
+            y1={115.625}
             y2={20}
           />
           <path
             aria-label="20. metaData1, 50."
-            d="M34.5 -0.625
-     A5.5 5.5 0 1 0 45.5 -0.625
-     M34.5 -0.625
-     A 5.5 5.5 0 1 1 45.5 -0.625
+            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"
@@ -1097,10 +1097,10 @@ exports[`LineChart - mouse events Should render customized callout per stack on
           />
           <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
+            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"
@@ -1151,12 +1151,6 @@ exports[`LineChart - mouse events Should render customized callout per stack on
         >
           <div
             data-automation-id="visibleContent"
-            style={
-              Object {
-                "position": "fixed",
-                "visibility": "hidden",
-              }
-            }
           >
             <div
               aria-label="Legends"
@@ -1313,14 +1307,20 @@ exports[`LineChart - mouse events Should render customized callout per stack on
           &::-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 {
-          "filter": "opacity(0)",
-          "opacity": 0,
-          "pointerEvents": "none",
+          "left": 8,
+          "maxHeight": 745,
+          "top": 15,
         }
       }
       tabIndex={-1}
@@ -1384,7 +1384,7 @@ exports[`LineChart snapShot testing Should render with default colors when line
         overflow: hidden;
         width: 100%;
       }
-  id="chart_84"
+  id="chart_8"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -1397,20 +1397,20 @@ exports[`LineChart snapShot testing Should render with default colors when line
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone85"
+    data-focuszone-id="FocusZone9"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       aria-label="LineChart"
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
         }
       }
-      width={0}
+      width={100}
     >
       <g
         className=
@@ -1438,8 +1438,8 @@ exports[`LineChart snapShot testing Should render with default colors when line
             & path {
               display: none;
             }
-        id="xAxisGElementchart_84"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_8"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -1466,23 +1466,24 @@ exports[`LineChart snapShot testing Should render with default colors when line
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_84"
+        id="yAxisGElementchart_8"
         transform="translate(40, 0)"
       />
       <g>
         <line
-          id="verticalLine79"
+          id="verticalLine3"
           stroke="#C8C8C8"
           strokeDasharray="5,5"
           visibility="hidden"
           x1={0}
           x2={0}
           y1={0}
-          y2={0}
+          y2={310}
         />
         <g>
           <line
-            id="lineID77_0_1"
+            id="lineID1_0_1"
+            key="lineID1_0_1"
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -1491,20 +1492,21 @@ exports[`LineChart snapShot testing Should render with default colors when line
             strokeLinecap="round"
             strokeWidth={4}
             x1={40}
-            x2={-20}
-            y1={-0.625}
+            x2={80}
+            y1={115.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
+            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="circle76_0_1"
+            id="circle0_0_1"
+            key="circle0_0_1"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -1517,14 +1519,15 @@ exports[`LineChart snapShot testing Should render with default colors when line
           />
           <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
+            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="circle76_0_11L"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -1585,7 +1588,7 @@ exports[`LineChart snapShot testing Should render with default colors when line
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone86"
+              data-focuszone-id="FocusZone10"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -1609,6 +1612,7 @@ exports[`LineChart snapShot testing Should render with default colors when line
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -1741,13 +1745,13 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
   >
     <svg
       aria-label="LineChart"
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
         }
       }
-      width={0}
+      width={100}
     >
       <g
         className=
@@ -1776,7 +1780,7 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
               display: none;
             }
         id="xAxisGElementchart_8"
-        transform="translate(0, -35)"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -1815,11 +1819,12 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
           x1={0}
           x2={0}
           y1={0}
-          y2={0}
+          y2={310}
         />
         <g>
           <line
             id="lineID1_0_1"
+            key="lineID1_0_1"
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -1828,20 +1833,21 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
             strokeLinecap="round"
             strokeWidth={4}
             x1={40}
-            x2={-20}
-            y1={-0.625}
+            x2={80}
+            y1={115.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
+            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]}
@@ -1854,14 +1860,15 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
           />
           <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
+            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]}
@@ -1946,6 +1953,7 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -2058,7 +2066,7 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
         overflow: hidden;
         width: 100%;
       }
-  id="chart_40"
+  id="chart_8"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2071,20 +2079,20 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone41"
+    data-focuszone-id="FocusZone9"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       aria-label="LineChart"
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
         }
       }
-      width={0}
+      width={100}
     >
       <g
         className=
@@ -2112,8 +2120,8 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
             & path {
               display: none;
             }
-        id="xAxisGElementchart_40"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_8"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -2140,23 +2148,24 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_40"
+        id="yAxisGElementchart_8"
         transform="translate(40, 0)"
       />
       <g>
         <line
-          id="verticalLine35"
+          id="verticalLine3"
           stroke="#C8C8C8"
           strokeDasharray="5,5"
           visibility="hidden"
           x1={0}
           x2={0}
           y1={0}
-          y2={0}
+          y2={310}
         />
         <g>
           <line
-            id="lineID33_0_1"
+            id="lineID1_0_1"
+            key="lineID1_0_1"
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2165,20 +2174,21 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
             strokeLinecap="round"
             strokeWidth={4}
             x1={40}
-            x2={-20}
-            y1={-0.625}
+            x2={80}
+            y1={115.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
+            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="circle32_0_1"
+            id="circle0_0_1"
+            key="circle0_0_1"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -2191,14 +2201,15 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
           />
           <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
+            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="circle32_0_11L"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -2242,7 +2253,7 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
             &:focus {
               outline: none;
             }
-        data-focuszone-id="FocusZone42"
+        data-focuszone-id="FocusZone10"
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -2266,6 +2277,7 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
                   display: inherit;
                   flex-shrink: 0;
                 }
+            key="0"
             role="none"
           >
             <button
@@ -2375,7 +2387,7 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_19"
+  id="chart_8"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2388,20 +2400,20 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone20"
+    data-focuszone-id="FocusZone9"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       aria-label="LineChart"
-      height={0}
+      height={350}
       style={
         Object {
           "display": "block",
         }
       }
-      width={0}
+      width={100}
     >
       <g
         className=
@@ -2429,8 +2441,8 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_19"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_8"
+        transform="translate(0, 315)"
       />
       <g
         className=
@@ -2457,23 +2469,24 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_19"
+        id="yAxisGElementchart_8"
         transform="translate(40, 0)"
       />
       <g>
         <line
-          id="verticalLine14"
+          id="verticalLine3"
           stroke="#C8C8C8"
           strokeDasharray="5,5"
           visibility="hidden"
           x1={0}
           x2={0}
           y1={0}
-          y2={0}
+          y2={350}
         />
         <g>
           <line
-            id="lineID12_0_1"
+            id="lineID1_0_1"
+            key="lineID1_0_1"
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2482,20 +2495,21 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
             strokeLinecap="round"
             strokeWidth={4}
             x1={40}
-            x2={-20}
-            y1={-0.625}
+            x2={80}
+            y1={130.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
+            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="circle11_0_1"
+            id="circle0_0_1"
+            key="circle0_0_1"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -2508,14 +2522,15 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
           />
           <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
+            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="circle11_0_11L"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -2552,7 +2567,7 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_29"
+  id="chart_8"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2565,20 +2580,20 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone30"
+    data-focuszone-id="FocusZone9"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       aria-label="LineChart"
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
         }
       }
-      width={0}
+      width={100}
     >
       <g
         className=
@@ -2606,8 +2621,8 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_29"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_8"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -2634,23 +2649,24 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_29"
+        id="yAxisGElementchart_8"
         transform="translate(40, 0)"
       />
       <g>
         <line
-          id="verticalLine24"
+          id="verticalLine3"
           stroke="#C8C8C8"
           strokeDasharray="5,5"
           visibility="hidden"
           x1={0}
           x2={0}
           y1={0}
-          y2={0}
+          y2={310}
         />
         <g>
           <line
-            id="lineID22_0_1"
+            id="lineID1_0_1"
+            key="lineID1_0_1"
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2659,20 +2675,21 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
             strokeLinecap="round"
             strokeWidth={4}
             x1={40}
-            x2={-20}
-            y1={-0.625}
+            x2={80}
+            y1={115.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
+            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="circle21_0_1"
+            id="circle0_0_1"
+            key="circle0_0_1"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -2685,14 +2702,15 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
           />
           <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
+            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="circle21_0_11L"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -2753,7 +2771,7 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone31"
+              data-focuszone-id="FocusZone10"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -2777,6 +2795,7 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -2889,7 +2908,7 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
         overflow: hidden;
         width: 100%;
       }
-  id="chart_51"
+  id="chart_8"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -2902,20 +2921,20 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone52"
+    data-focuszone-id="FocusZone9"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       aria-label="LineChart"
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
         }
       }
-      width={0}
+      width={100}
     >
       <g
         className=
@@ -2943,8 +2962,8 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
             & path {
               display: none;
             }
-        id="xAxisGElementchart_51"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_8"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -2971,23 +2990,24 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_51"
+        id="yAxisGElementchart_8"
         transform="translate(40, 0)"
       />
       <g>
         <line
-          id="verticalLine46"
+          id="verticalLine3"
           stroke="#C8C8C8"
           strokeDasharray="5,5"
           visibility="hidden"
           x1={0}
           x2={0}
           y1={0}
-          y2={0}
+          y2={310}
         />
         <g>
           <line
-            id="lineID44_0_1"
+            id="lineID1_0_1"
+            key="lineID1_0_1"
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2996,20 +3016,21 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
             strokeLinecap="round"
             strokeWidth={4}
             x1={40}
-            x2={-20}
-            y1={-0.625}
+            x2={80}
+            y1={115.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
+            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="circle43_0_1"
+            id="circle0_0_1"
+            key="circle0_0_1"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -3022,14 +3043,15 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
           />
           <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
+            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="circle43_0_11L"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -3090,7 +3112,7 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone53"
+              data-focuszone-id="FocusZone10"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3114,6 +3136,7 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -3226,7 +3249,7 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_62"
+  id="chart_8"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3239,20 +3262,20 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone63"
+    data-focuszone-id="FocusZone9"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       aria-label="LineChart"
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
         }
       }
-      width={0}
+      width={140}
     >
       <g
         className=
@@ -3280,8 +3303,8 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_62"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_8"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -3308,23 +3331,24 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_62"
+        id="yAxisGElementchart_8"
         transform="translate(40, 0)"
       />
       <g>
         <line
-          id="verticalLine57"
+          id="verticalLine3"
           stroke="#C8C8C8"
           strokeDasharray="5,5"
           visibility="hidden"
           x1={0}
           x2={0}
           y1={0}
-          y2={0}
+          y2={310}
         />
         <g>
           <line
-            id="lineID55_0_1"
+            id="lineID1_0_1"
+            key="lineID1_0_1"
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3333,20 +3357,21 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
             strokeLinecap="round"
             strokeWidth={4}
             x1={40}
-            x2={-20}
-            y1={-0.625}
+            x2={120}
+            y1={115.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
+            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="circle54_0_1"
+            id="circle0_0_1"
+            key="circle0_0_1"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -3359,14 +3384,15 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
           />
           <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
+            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="circle54_0_11L"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -3427,7 +3453,7 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone64"
+              data-focuszone-id="FocusZone10"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3451,6 +3477,7 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
@@ -3563,7 +3590,7 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         overflow: hidden;
         width: 100%;
       }
-  id="chart_73"
+  id="chart_8"
   onMouseLeave={[Function]}
   role="presentation"
 >
@@ -3576,20 +3603,20 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         {
           overflow: auto;
         }
-    data-focuszone-id="FocusZone74"
+    data-focuszone-id="FocusZone9"
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
     <svg
       aria-label="LineChart"
-      height={0}
+      height={310}
       style={
         Object {
           "display": "block",
         }
       }
-      width={0}
+      width={100}
     >
       <g
         className=
@@ -3617,8 +3644,8 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
             & path {
               display: none;
             }
-        id="xAxisGElementchart_73"
-        transform="translate(0, -35)"
+        id="xAxisGElementchart_8"
+        transform="translate(0, 275)"
       />
       <g
         className=
@@ -3645,23 +3672,24 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
               opacity: 0.1;
               stroke: rgb(179, 179, 179);
             }
-        id="yAxisGElementchart_73"
+        id="yAxisGElementchart_8"
         transform="translate(40, 0)"
       />
       <g>
         <line
-          id="verticalLine68"
+          id="verticalLine3"
           stroke="#C8C8C8"
           strokeDasharray="5,5"
           visibility="hidden"
           x1={0}
           x2={0}
           y1={0}
-          y2={0}
+          y2={310}
         />
         <g>
           <line
-            id="lineID66_0_1"
+            id="lineID1_0_1"
+            key="lineID1_0_1"
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3670,20 +3698,21 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
             strokeLinecap="round"
             strokeWidth={4}
             x1={40}
-            x2={-20}
-            y1={-0.625}
+            x2={80}
+            y1={115.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
+            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="circle65_0_1"
+            id="circle0_0_1"
+            key="circle0_0_1"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -3696,14 +3725,15 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
           />
           <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
+            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="circle65_0_11L"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
             onBlur={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
@@ -3764,7 +3794,7 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
                   &:focus {
                     outline: none;
                   }
-              data-focuszone-id="FocusZone75"
+              data-focuszone-id="FocusZone10"
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -3788,6 +3818,7 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
                         display: inherit;
                         flex-shrink: 0;
                       }
+                  key="0"
                   role="none"
                 >
                   <button
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx
index fe7b658c8b9176..32f2706cbed8cb 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx
@@ -186,6 +186,7 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt
             margins={margins}
             xAxisTickCount={10}
             allowMultipleShapesForPoints={this.state.allowMultipleShapes}
+            enablePerfOptimization={true}
           />
         </div>
       </>
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomAccessibility.Example.tsx
index 8672cfcd2db6c3..3f685e2f2adfed 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.CustomAccessibility.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomAccessibility.Example.tsx
@@ -225,6 +225,7 @@ export class LineChartCustomAccessibilityExample extends React.Component<
           legendProps={{ canSelectMultipleLegends: true, allowFocusOnLegends: true }}
           colorFillBars={colorFillBarData}
           allowMultipleShapesForPoints={this.state.allowMultipleShapes}
+          enablePerfOptimization={true}
         />
       </div>
     );
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx
index fda2ad0695a2c4..0f86f179ca3ae4 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx
@@ -201,6 +201,7 @@ export class LineChartCustomLocaleDateAxisExample extends React.Component<{}, IL
             allowMultipleShapesForPoints={this.state.allowMultipleShapes}
             rotateXAxisLables={true}
             timeFormatLocale={this.state.customLocale}
+            enablePerfOptimization={true}
           />
         </div>
       </>
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Events.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Events.Example.tsx
index e1e4352bda62ce..0e01e45acfbd2c 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.Events.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Events.Example.tsx
@@ -233,6 +233,7 @@ export class LineChartEventsExample extends React.Component<{}, ILineChartEvents
           }}
           height={this.state.height}
           width={this.state.width}
+          enablePerfOptimization={true}
         />
       </div>
     );
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Gaps.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Gaps.Example.tsx
index e145d82c007c03..d1ede8341c66b3 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.Gaps.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Gaps.Example.tsx
@@ -270,6 +270,7 @@ export class LineChartGapsExample extends React.Component<{}, ILineChartGapsStat
               calloutMaxWidth: 200,
             }}
             getCalloutDescriptionMessage={this._calculateCalloutDescription}
+            enablePerfOptimization={true}
           />
         </div>
       </>
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.LargeData.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.LargeData.Example.tsx
index a8559d1d58ec32..deb578a1cb6a27 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.LargeData.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.LargeData.Example.tsx
@@ -144,6 +144,7 @@ export class LineChartLargeDataExample extends React.Component<{}, ILineChartBas
             margins={margins}
             allowMultipleShapesForPoints={this.state.allowMultipleShapes}
             optimizeLargeData={true}
+            enablePerfOptimization={true}
           />
         </div>
       </>
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Multiple.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Multiple.Example.tsx
index fe1f3f90501298..07d9eb6db8db5f 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.Multiple.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Multiple.Example.tsx
@@ -303,6 +303,7 @@ export class LineChartMultipleExample extends React.Component<{}, ILineChartMult
           legendProps={{ canSelectMultipleLegends: true, allowFocusOnLegends: true }}
           colorFillBars={colorFillBarData}
           allowMultipleShapesForPoints={this.state.allowMultipleShapes}
+          enablePerfOptimization={true}
         />
       </div>
     );
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Styled.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Styled.Example.tsx
index 59dd88fd2a5728..9710ce7e99b860 100644
--- a/packages/react-examples/src/react-charting/LineChart/LineChart.Styled.Example.tsx
+++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Styled.Example.tsx
@@ -105,6 +105,7 @@ export class LineChartStyledExample extends React.Component<{}, IStyledLineChart
                 />
               ) : null
             }
+            enablePerfOptimization={true}
           />
         </div>
       </>