diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/DeclarativeChartRTL.test.tsx.snap b/packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/DeclarativeChartRTL.test.tsx.snap
index 2518fa0e844b78..6e59d21ed4fdfc 100644
--- a/packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/DeclarativeChartRTL.test.tsx.snap
+++ b/packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/DeclarativeChartRTL.test.tsx.snap
@@ -1215,542 +1215,541 @@ exports[`DeclarativeChart Should render donutchart in DeclarativeChart 1`] = `
     <div
       class=
           ms-FocusZone
+          chartWrapper
           &:focus {
             outline: none;
           }
       data-focuszone-id="FocusZone3"
       data-tabster="{\\"uncontrolled\\": {}}"
     >
-      <div>
-        <svg
-          aria-label="Donut charts using Plotly"
-          class=
+      <svg
+        aria-label="Donut charts using Plotly"
+        class=
 
-              {
-                alignment-adjust: center;
-                box-sizing: content-box;
-                display: block;
-                height: 180px;
-                overflow: visible;
-                width: 440px;
-              }
-          focusable="false"
-          viewBox="0 0 0 180"
+            {
+              alignment-adjust: center;
+              box-sizing: content-box;
+              display: block;
+              height: 180px;
+              overflow: visible;
+              width: 440px;
+            }
+        focusable="false"
+        viewBox="0 0 0 180"
+      >
+        <g
+          transform="translate(220, 90)"
         >
-          <g
-            transform="translate(220, 90)"
-          >
-            <g>
-              <path
-                aria-label="AMC, 1."
-                class=
-
-                    {
-                      cursor: default;
-                      fill: #e3008c;
-                      opacity: 0.1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M0.816,-69.995A70,70,0,0,1,13.285,-68.728L7.65,-41.297A42,42,0,0,0,0.816,-41.992Z"
-                data-is-focusable="false"
-                id="_Pie_1AMC1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="Cadillac, 1."
-                class=
+          <g>
+            <path
+              aria-label="AMC, 1."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #2aa0a4;
-                      opacity: 1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M14.884,-68.399A70,70,0,0,1,26.842,-64.649L15.803,-38.914A42,42,0,0,0,9.249,-40.969Z"
-                data-is-focusable="true"
-                id="_Pie_1Cadillac1"
-                role="img"
-                tabindex="0"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="Camaro, 1."
-                class=
+                  {
+                    cursor: default;
+                    fill: #e3008c;
+                    opacity: 0.1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M0.816,-69.995A70,70,0,0,1,13.285,-68.728L7.65,-41.297A42,42,0,0,0,0.816,-41.992Z"
+              data-is-focusable="false"
+              id="_Pie_1AMC1"
+              role="img"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="Cadillac, 1."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #9373c0;
-                      opacity: 0.1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M28.342,-64.006A70,70,0,0,1,39.301,-57.926L23.31,-34.938A42,42,0,0,0,17.304,-38.27Z"
-                data-is-focusable="false"
-                id="_Pie_1Camaro1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="Chrysler, 1."
-                class=
+                  {
+                    cursor: default;
+                    fill: #2aa0a4;
+                    opacity: 1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M14.884,-68.399A70,70,0,0,1,26.842,-64.649L15.803,-38.914A42,42,0,0,0,9.249,-40.969Z"
+              data-is-focusable="true"
+              id="_Pie_1Cadillac1"
+              role="img"
+              tabindex="0"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="Camaro, 1."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #13a10e;
-                      opacity: 0.1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M40.642,-56.993A70,70,0,0,1,50.153,-48.833L29.863,-29.533A42,42,0,0,0,24.65,-34.005Z"
-                data-is-focusable="false"
-                id="_Pie_1Chrysler1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="Datsun, 1."
-                class=
+                  {
+                    cursor: default;
+                    fill: #9373c0;
+                    opacity: 0.1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M28.342,-64.006A70,70,0,0,1,39.301,-57.926L23.31,-34.938A42,42,0,0,0,17.304,-38.27Z"
+              data-is-focusable="false"
+              id="_Pie_1Camaro1"
+              role="img"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="Chrysler, 1."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #3a96dd;
-                      opacity: 0.1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M51.278,-47.65A70,70,0,0,1,58.953,-37.742L35.195,-22.92A42,42,0,0,0,30.988,-28.35Z"
-                data-is-focusable="false"
-                id="_Pie_1Datsun1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="Dodge, 1."
-                class=
+                  {
+                    cursor: default;
+                    fill: #13a10e;
+                    opacity: 0.1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M40.642,-56.993A70,70,0,0,1,50.153,-48.833L29.863,-29.533A42,42,0,0,0,24.65,-34.005Z"
+              data-is-focusable="false"
+              id="_Pie_1Chrysler1"
+              role="img"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="Datsun, 1."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #ca5010;
-                      opacity: 0.1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M59.818,-36.357A70,70,0,0,1,65.342,-25.108L39.087,-15.369A42,42,0,0,0,36.059,-21.535Z"
-                data-is-focusable="false"
-                id="_Pie_1Dodge1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="Duster, 1."
-                class=
+                  {
+                    cursor: default;
+                    fill: #3a96dd;
+                    opacity: 0.1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M51.278,-47.65A70,70,0,0,1,58.953,-37.742L35.195,-22.92A42,42,0,0,0,30.988,-28.35Z"
+              data-is-focusable="false"
+              id="_Pie_1Datsun1"
+              role="img"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="Dodge, 1."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #57811b;
-                      opacity: 0.1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M65.91,-23.577A70,70,0,0,1,69.058,-11.447L41.38,-7.19A42,42,0,0,0,39.655,-13.839Z"
-                data-is-focusable="false"
-                id="_Pie_1Duster1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="Ferrari, 1."
-                class=
+                  {
+                    cursor: default;
+                    fill: #ca5010;
+                    opacity: 0.1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M59.818,-36.357A70,70,0,0,1,65.342,-25.108L39.087,-15.369A42,42,0,0,0,36.059,-21.535Z"
+              data-is-focusable="false"
+              id="_Pie_1Dodge1"
+              role="img"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="Duster, 1."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #b146c2;
-                      opacity: 0.1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M69.306,-9.833A70,70,0,0,1,69.949,2.683L41.98,1.283A42,42,0,0,0,41.628,-5.576Z"
-                data-is-focusable="false"
-                id="_Pie_1Ferrari1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="Fiat, 2."
-                class=
+                  {
+                    cursor: default;
+                    fill: #57811b;
+                    opacity: 0.1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M65.91,-23.577A70,70,0,0,1,69.058,-11.447L41.38,-7.19A42,42,0,0,0,39.655,-13.839Z"
+              data-is-focusable="false"
+              id="_Pie_1Duster1"
+              role="img"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="Ferrari, 1."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #ae8c00;
-                      opacity: 0.1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M69.867,4.314A70,70,0,0,1,63.815,28.769L38.422,16.963A42,42,0,0,0,41.899,2.914Z"
-                data-is-focusable="false"
-                id="_Pie_1Fiat2"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="Ford, 1."
-                class=
+                  {
+                    cursor: default;
+                    fill: #b146c2;
+                    opacity: 0.1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M69.306,-9.833A70,70,0,0,1,69.949,2.683L41.98,1.283A42,42,0,0,0,41.628,-5.576Z"
+              data-is-focusable="false"
+              id="_Pie_1Ferrari1"
+              role="img"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="Fiat, 2."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #3c51b4;
-                      opacity: 0.1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M63.127,30.25A70,70,0,0,1,56.721,41.021L34.223,24.347A42,42,0,0,0,37.734,18.444Z"
-                data-is-focusable="false"
-                id="_Pie_1Ford1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="Honda, 1."
-                class=
+                  {
+                    cursor: default;
+                    fill: #ae8c00;
+                    opacity: 0.1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M69.867,4.314A70,70,0,0,1,63.815,28.769L38.422,16.963A42,42,0,0,0,41.899,2.914Z"
+              data-is-focusable="false"
+              id="_Pie_1Fiat2"
+              role="img"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="Ford, 1."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #ad006a;
-                      opacity: 0.1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M55.749,42.333A70,70,0,0,1,47.307,51.595L28.624,30.736A42,42,0,0,0,33.251,25.659Z"
-                data-is-focusable="false"
-                id="_Pie_1Honda1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="Hornet, 2."
-                class=
+                  {
+                    cursor: default;
+                    fill: #3c51b4;
+                    opacity: 0.1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M63.127,30.25A70,70,0,0,1,56.721,41.021L34.223,24.347A42,42,0,0,0,37.734,18.444Z"
+              data-is-focusable="false"
+              id="_Pie_1Ford1"
+              role="img"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="Honda, 1."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #026467;
-                      opacity: 0.1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M46.09,52.685A70,70,0,0,1,24.453,65.59L14.978,39.239A42,42,0,0,0,27.408,31.825Z"
-                data-is-focusable="false"
-                id="_Pie_1Hornet2"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="Lincoln, 1."
-                class=
+                  {
+                    cursor: default;
+                    fill: #ad006a;
+                    opacity: 0.1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M55.749,42.333A70,70,0,0,1,47.307,51.595L28.624,30.736A42,42,0,0,0,33.251,25.659Z"
+              data-is-focusable="false"
+              id="_Pie_1Honda1"
+              role="img"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="Hornet, 2."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #674c8c;
-                      opacity: 0.1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M22.917,66.142A70,70,0,0,1,10.756,69.169L6.776,41.45A42,42,0,0,0,13.441,39.791Z"
-                data-is-focusable="false"
-                id="_Pie_1Lincoln1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="Lotus, 1."
-                class=
+                  {
+                    cursor: default;
+                    fill: #026467;
+                    opacity: 0.1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M46.09,52.685A70,70,0,0,1,24.453,65.59L14.978,39.239A42,42,0,0,0,27.408,31.825Z"
+              data-is-focusable="false"
+              id="_Pie_1Hornet2"
+              role="img"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="Lincoln, 1."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #0e7a0b;
-                      opacity: 0.1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M9.139,69.401A70,70,0,0,1,-3.382,69.918L-1.703,41.965A42,42,0,0,0,5.16,41.682Z"
-                data-is-focusable="false"
-                id="_Pie_1Lotus1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="Maserati, 1."
-                class=
+                  {
+                    cursor: default;
+                    fill: #674c8c;
+                    opacity: 0.1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M22.917,66.142A70,70,0,0,1,10.756,69.169L6.776,41.45A42,42,0,0,0,13.441,39.791Z"
+              data-is-focusable="false"
+              id="_Pie_1Lincoln1"
+              role="img"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="Lotus, 1."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #2c72a8;
-                      opacity: 0.1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M-5.012,69.82A70,70,0,0,1,-17.382,67.808L-10.112,40.764A42,42,0,0,0,-3.333,41.868Z"
-                data-is-focusable="false"
-                id="_Pie_1Maserati1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="Mazda, 2."
-                class=
+                  {
+                    cursor: default;
+                    fill: #0e7a0b;
+                    opacity: 0.1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M9.139,69.401A70,70,0,0,1,-3.382,69.918L-1.703,41.965A42,42,0,0,0,5.16,41.682Z"
+              data-is-focusable="false"
+              id="_Pie_1Lotus1"
+              role="img"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="Maserati, 1."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #9a3d0c;
-                      opacity: 0.1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M-18.959,67.384A70,70,0,0,1,-41.586,56.308L-24.688,33.978A42,42,0,0,0,-11.689,40.341Z"
-                data-is-focusable="false"
-                id="_Pie_1Mazda2"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="Merc, 7."
-                class=
+                  {
+                    cursor: default;
+                    fill: #2c72a8;
+                    opacity: 0.1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M-5.012,69.82A70,70,0,0,1,-17.382,67.808L-10.112,40.764A42,42,0,0,0,-3.333,41.868Z"
+              data-is-focusable="false"
+              id="_Pie_1Maserati1"
+              role="img"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="Mazda, 2."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #405f14;
-                      opacity: 0.1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M-42.888,55.323A70,70,0,0,1,-65.425,-24.891L-39.37,-14.629A42,42,0,0,0,-25.99,32.992Z"
-                data-is-focusable="false"
-                id="_Pie_1Merc7"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="Pontiac, 1."
-                class=
+                  {
+                    cursor: default;
+                    fill: #9a3d0c;
+                    opacity: 0.1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M-18.959,67.384A70,70,0,0,1,-41.586,56.308L-24.688,33.978A42,42,0,0,0,-11.689,40.341Z"
+              data-is-focusable="false"
+              id="_Pie_1Mazda2"
+              role="img"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="Merc, 7."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #863593;
-                      opacity: 0.1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M-64.827,-26.41A70,70,0,0,1,-59.079,-37.546L-35.621,-22.251A42,42,0,0,0,-38.772,-16.148Z"
-                data-is-focusable="false"
-                id="_Pie_1Pontiac1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="Porsche, 1."
-                class=
+                  {
+                    cursor: default;
+                    fill: #405f14;
+                    opacity: 0.1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M-42.888,55.323A70,70,0,0,1,-65.425,-24.891L-39.37,-14.629A42,42,0,0,0,-25.99,32.992Z"
+              data-is-focusable="false"
+              id="_Pie_1Merc7"
+              role="img"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="Pontiac, 1."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #6d5700;
-                      opacity: 0.1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M-58.187,-38.914A70,70,0,0,1,-50.315,-48.666L-30.415,-28.964A42,42,0,0,0,-34.73,-23.619Z"
-                data-is-focusable="false"
-                id="_Pie_1Porsche1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="Toyota, 2."
-                class=
+                  {
+                    cursor: default;
+                    fill: #863593;
+                    opacity: 0.1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M-64.827,-26.41A70,70,0,0,1,-59.079,-37.546L-35.621,-22.251A42,42,0,0,0,-38.772,-16.148Z"
+              data-is-focusable="false"
+              id="_Pie_1Pontiac1"
+              role="img"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="Porsche, 1."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #4f6bed;
-                      opacity: 0.1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M-49.167,-49.826A70,70,0,0,1,-28.342,-64.006L-17.304,-38.27A42,42,0,0,0,-29.267,-30.124Z"
-                data-is-focusable="false"
-                id="_Pie_1Toyota2"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="Valiant, 1."
-                class=
+                  {
+                    cursor: default;
+                    fill: #6d5700;
+                    opacity: 0.1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M-58.187,-38.914A70,70,0,0,1,-50.315,-48.666L-30.415,-28.964A42,42,0,0,0,-34.73,-23.619Z"
+              data-is-focusable="false"
+              id="_Pie_1Porsche1"
+              role="img"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="Toyota, 2."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #ea38a6;
-                      opacity: 0.1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M-26.842,-64.649A70,70,0,0,1,-14.884,-68.399L-9.249,-40.969A42,42,0,0,0,-15.803,-38.914Z"
-                data-is-focusable="false"
-                id="_Pie_1Valiant1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="Volvo, 1."
-                class=
+                  {
+                    cursor: default;
+                    fill: #4f6bed;
+                    opacity: 0.1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M-49.167,-49.826A70,70,0,0,1,-28.342,-64.006L-17.304,-38.27A42,42,0,0,0,-29.267,-30.124Z"
+              data-is-focusable="false"
+              id="_Pie_1Toyota2"
+              role="img"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="Valiant, 1."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #038387;
-                      opacity: 0.1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M-13.285,-68.728A70,70,0,0,1,-0.816,-69.995L-0.816,-41.992A42,42,0,0,0,-7.65,-41.297Z"
-                data-is-focusable="false"
-                id="_Pie_1Volvo1"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <text
+                  {
+                    cursor: default;
+                    fill: #ea38a6;
+                    opacity: 0.1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M-26.842,-64.649A70,70,0,0,1,-14.884,-68.399L-9.249,-40.969A42,42,0,0,0,-15.803,-38.914Z"
+              data-is-focusable="false"
+              id="_Pie_1Valiant1"
+              role="img"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="Volvo, 1."
               class=
 
                   {
-                    fill: #323130;
-                    font-size: 24px;
-                    font-weight: 600;
+                    cursor: default;
+                    fill: #038387;
+                    opacity: 0.1;
+                    outline: transparent;
+                    stroke: #ffffff;
                   }
-                  @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
-                    fill: rgb(179, 179, 179);
+                  &::-moz-focus-inner {
+                    border: 0;
                   }
-              dominant-baseline="middle"
-              text-anchor="middle"
+              d="M-13.285,-68.728A70,70,0,0,1,-0.816,-69.995L-0.816,-41.992A42,42,0,0,0,-7.65,-41.297Z"
+              data-is-focusable="false"
+              id="_Pie_1Volvo1"
+              role="img"
+              tabindex="-1"
+            />
+          </g>
+          <text
+            class=
+
+                {
+                  fill: #323130;
+                  font-size: 24px;
+                  font-weight: 600;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+                  fill: rgb(179, 179, 179);
+                }
+            dominant-baseline="middle"
+            text-anchor="middle"
+            y="5"
+          >
+            <tspan
+              dy="0em"
+              id="WordBreakId-0-0"
+              x="0"
               y="5"
             >
-              <tspan
-                dy="0em"
-                id="WordBreakId-0-0"
-                x="0"
-                y="5"
-              >
-                1 
-              </tspan>
-            </text>
-          </g>
-        </svg>
-      </div>
+              1 
+            </tspan>
+          </text>
+        </g>
+      </svg>
     </div>
     <span
       class="ms-layer"
diff --git a/packages/charts/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap b/packages/charts/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
index 33b900e4290b13..fe07813388efe7 100644
--- a/packages/charts/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
+++ b/packages/charts/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
@@ -21,6 +21,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
   <div
     className=
         ms-FocusZone
+        chartWrapper
         &:focus {
           outline: none;
         }
@@ -30,104 +31,102 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
-    <div>
-      <svg
-        aria-label="Donut chart example"
-        className=
+    <svg
+      aria-label="Donut chart example"
+      className=
 
-            {
-              alignment-adjust: center;
-              box-sizing: content-box;
-              display: block;
-              height: -40px;
-              overflow: visible;
-              width: 0px;
-            }
+          {
+            alignment-adjust: center;
+            box-sizing: content-box;
+            display: block;
+            height: -40px;
+            overflow: visible;
+            width: 0px;
+          }
+    >
+      <g
+        transform="translate(0, -20)"
       >
-        <g
-          transform="translate(0, -20)"
-        >
-          <g>
-            <path
-              aria-label="2020/04/30, 20000."
-              className=
+        <g>
+          <path
+            aria-label="2020/04/30, 20000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #E5E5E5;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
-              data-is-focusable={true}
-              id="_Pie_1first20000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/20, 39000."
-              className=
+                {
+                  cursor: default;
+                  fill: #E5E5E5;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
+            data-is-focusable={true}
+            id="_Pie_1first20000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/20, 39000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #0078D4;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
-              data-is-focusable={true}
-              id="_Pie_1second39000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/25, 45000."
-              className=
+                {
+                  cursor: default;
+                  fill: #0078D4;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
+            data-is-focusable={true}
+            id="_Pie_1second39000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/25, 45000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #DADADA;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
-              data-is-focusable={true}
-              id="_Pie_1third45000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
+                {
+                  cursor: default;
+                  fill: #DADADA;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
+            data-is-focusable={true}
+            id="_Pie_1third45000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
         </g>
-      </svg>
-    </div>
+      </g>
+    </svg>
   </div>
   <div
     className=
@@ -710,6 +709,7 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover
   <div
     className=
         ms-FocusZone
+        chartWrapper
         &:focus {
           outline: none;
         }
@@ -719,104 +719,102 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
-    <div>
-      <svg
-        aria-label="Donut chart example"
-        className=
+    <svg
+      aria-label="Donut chart example"
+      className=
 
-            {
-              alignment-adjust: center;
-              box-sizing: content-box;
-              display: block;
-              height: -40px;
-              overflow: visible;
-              width: 0px;
-            }
+          {
+            alignment-adjust: center;
+            box-sizing: content-box;
+            display: block;
+            height: -40px;
+            overflow: visible;
+            width: 0px;
+          }
+    >
+      <g
+        transform="translate(0, -20)"
       >
-        <g
-          transform="translate(0, -20)"
-        >
-          <g>
-            <path
-              aria-label="2020/04/30, 20000."
-              className=
+        <g>
+          <path
+            aria-label="2020/04/30, 20000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #E5E5E5;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
-              data-is-focusable={true}
-              id="_Pie_1first20000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/20, 39000."
-              className=
+                {
+                  cursor: default;
+                  fill: #E5E5E5;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
+            data-is-focusable={true}
+            id="_Pie_1first20000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/20, 39000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #0078D4;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
-              data-is-focusable={true}
-              id="_Pie_1second39000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/25, 45000."
-              className=
+                {
+                  cursor: default;
+                  fill: #0078D4;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
+            data-is-focusable={true}
+            id="_Pie_1second39000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/25, 45000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #DADADA;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
-              data-is-focusable={true}
-              id="_Pie_1third45000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
+                {
+                  cursor: default;
+                  fill: #DADADA;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
+            data-is-focusable={true}
+            id="_Pie_1third45000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
         </g>
-      </svg>
-    </div>
+      </g>
+    </svg>
   </div>
   <div
     className=
@@ -1308,6 +1306,7 @@ exports[`DonutChart snapShot testing Should elevate all smaller values to minimu
   <div
     className=
         ms-FocusZone
+        chartWrapper
         &:focus {
           outline: none;
         }
@@ -1317,105 +1316,103 @@ exports[`DonutChart snapShot testing Should elevate all smaller values to minimu
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
-    <div>
-      <svg
-        aria-label="Donut chart example"
-        className=
+    <svg
+      aria-label="Donut chart example"
+      className=
 
-            {
-              alignment-adjust: center;
-              box-sizing: content-box;
-              display: block;
-              height: 200px;
-              overflow: visible;
-              width: 200px;
-            }
+          {
+            alignment-adjust: center;
+            box-sizing: content-box;
+            display: block;
+            height: 200px;
+            overflow: visible;
+            width: 200px;
+          }
+    >
+      <g
+        transform="translate(100, 100)"
       >
-        <g
-          transform="translate(100, 100)"
-        >
-          <g>
-            <path
-              aria-label="2020/04/30, 20000."
-              className=
+        <g>
+          <path
+            aria-label="2020/04/30, 20000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #E5E5E5;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1first20000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/20, 39000."
-              className=
+                {
+                  cursor: default;
+                  fill: #E5E5E5;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1first20000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/20, 39000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #0078D4;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1second39000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/25, 45000."
-              className=
+                {
+                  cursor: default;
+                  fill: #0078D4;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1second39000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/25, 45000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #DADADA;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1third45000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          
+                {
+                  cursor: default;
+                  fill: #DADADA;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1third45000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
         </g>
-      </svg>
-    </div>
+        
+      </g>
+    </svg>
   </div>
   <span
     className="ms-layer"
@@ -1827,6 +1824,7 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
   <div
     className=
         ms-FocusZone
+        chartWrapper
         &:focus {
           outline: none;
         }
@@ -1836,153 +1834,151 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
-    <div>
-      <svg
-        aria-label="Donut chart example"
-        className=
+    <svg
+      aria-label="Donut chart example"
+      className=
 
-            {
-              alignment-adjust: center;
-              box-sizing: content-box;
-              display: block;
-              height: 200px;
-              overflow: visible;
-              width: 200px;
-            }
+          {
+            alignment-adjust: center;
+            box-sizing: content-box;
+            display: block;
+            height: 200px;
+            overflow: visible;
+            width: 200px;
+          }
+    >
+      <g
+        transform="translate(100, 100)"
       >
-        <g
-          transform="translate(100, 100)"
-        >
-          <g>
-            <path
-              aria-label="2020/04/30, 20000."
-              className=
+        <g>
+          <path
+            aria-label="2020/04/30, 20000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #E5E5E5;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M0.6,-59.997A60,60,0,0,1,56.068,-21.363L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1first20000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-            <text
-              aria-hidden={true}
-              className=
+                {
+                  cursor: default;
+                  fill: #E5E5E5;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M0.6,-59.997A60,60,0,0,1,56.068,-21.363L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1first20000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+          <text
+            aria-hidden={true}
+            className=
 
-                  {
-                    fill: #323130;
-                    font-size: 12px;
-                    font-weight: 600;
-                  }
-              dominantBaseline="auto"
-              textAnchor="start"
-              x={35.43557344375781}
-              y={-50.87553571916512}
-            >
-              20.0k
-            </text>
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/20, 39000."
-              className=
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            dominantBaseline="auto"
+            textAnchor="start"
+            x={35.43557344375781}
+            y={-50.87553571916512}
+          >
+            20.0k
+          </text>
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/20, 39000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #0078D4;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M56.484,-20.237A60,60,0,0,1,-24.404,54.813L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1second39000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-            <text
-              aria-hidden={true}
-              className=
+                {
+                  cursor: default;
+                  fill: #0078D4;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M56.484,-20.237A60,60,0,0,1,-24.404,54.813L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1second39000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+          <text
+            aria-hidden={true}
+            className=
 
-                  {
-                    fill: #323130;
-                    font-size: 12px;
-                    font-weight: 600;
-                  }
-              dominantBaseline="hanging"
-              textAnchor="start"
-              x={42.16983494620299}
-              y={45.45002772947447}
-            >
-              39.0k
-            </text>
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/25, 45000."
-              className=
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            dominantBaseline="hanging"
+            textAnchor="start"
+            x={42.16983494620299}
+            y={45.45002772947447}
+          >
+            39.0k
+          </text>
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/25, 45000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #DADADA;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M-25.495,54.314A60,60,0,0,1,-0.6,-59.997L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1third45000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-            <text
-              aria-hidden={true}
-              className=
+                {
+                  cursor: default;
+                  fill: #DADADA;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M-25.495,54.314A60,60,0,0,1,-0.6,-59.997L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1third45000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+          <text
+            aria-hidden={true}
+            className=
 
-                  {
-                    fill: #323130;
-                    font-size: 12px;
-                    font-weight: 600;
-                  }
-              dominantBaseline="auto"
-              textAnchor="end"
-              x={-60.58001193073337}
-              y={-13.19326170710649}
-            >
-              45.0k
-            </text>
-          </g>
-          
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            dominantBaseline="auto"
+            textAnchor="end"
+            x={-60.58001193073337}
+            y={-13.19326170710649}
+          >
+            45.0k
+          </text>
         </g>
-      </svg>
-    </div>
+        
+      </g>
+    </svg>
   </div>
   <span
     className="ms-layer"
@@ -2394,6 +2390,7 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
   <div
     className=
         ms-FocusZone
+        chartWrapper
         &:focus {
           outline: none;
         }
@@ -2403,153 +2400,151 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
-    <div>
-      <svg
-        aria-label="Donut chart example"
-        className=
+    <svg
+      aria-label="Donut chart example"
+      className=
 
-            {
-              alignment-adjust: center;
-              box-sizing: content-box;
-              display: block;
-              height: 200px;
-              overflow: visible;
-              width: 200px;
-            }
+          {
+            alignment-adjust: center;
+            box-sizing: content-box;
+            display: block;
+            height: 200px;
+            overflow: visible;
+            width: 200px;
+          }
+    >
+      <g
+        transform="translate(100, 100)"
       >
-        <g
-          transform="translate(100, 100)"
-        >
-          <g>
-            <path
-              aria-label="2020/04/30, 20000."
-              className=
+        <g>
+          <path
+            aria-label="2020/04/30, 20000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #E5E5E5;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M0.6,-59.997A60,60,0,0,1,56.068,-21.363L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1first20000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-            <text
-              aria-hidden={true}
-              className=
+                {
+                  cursor: default;
+                  fill: #E5E5E5;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M0.6,-59.997A60,60,0,0,1,56.068,-21.363L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1first20000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+          <text
+            aria-hidden={true}
+            className=
 
-                  {
-                    fill: #323130;
-                    font-size: 12px;
-                    font-weight: 600;
-                  }
-              dominantBaseline="auto"
-              textAnchor="start"
-              x={35.43557344375781}
-              y={-50.87553571916512}
-            >
-              19%
-            </text>
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/20, 39000."
-              className=
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            dominantBaseline="auto"
+            textAnchor="start"
+            x={35.43557344375781}
+            y={-50.87553571916512}
+          >
+            19%
+          </text>
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/20, 39000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #0078D4;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M56.484,-20.237A60,60,0,0,1,-24.404,54.813L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1second39000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-            <text
-              aria-hidden={true}
-              className=
+                {
+                  cursor: default;
+                  fill: #0078D4;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M56.484,-20.237A60,60,0,0,1,-24.404,54.813L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1second39000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+          <text
+            aria-hidden={true}
+            className=
 
-                  {
-                    fill: #323130;
-                    font-size: 12px;
-                    font-weight: 600;
-                  }
-              dominantBaseline="hanging"
-              textAnchor="start"
-              x={42.16983494620299}
-              y={45.45002772947447}
-            >
-              38%
-            </text>
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/25, 45000."
-              className=
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            dominantBaseline="hanging"
+            textAnchor="start"
+            x={42.16983494620299}
+            y={45.45002772947447}
+          >
+            38%
+          </text>
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/25, 45000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #DADADA;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M-25.495,54.314A60,60,0,0,1,-0.6,-59.997L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1third45000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-            <text
-              aria-hidden={true}
-              className=
+                {
+                  cursor: default;
+                  fill: #DADADA;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M-25.495,54.314A60,60,0,0,1,-0.6,-59.997L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1third45000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+          <text
+            aria-hidden={true}
+            className=
 
-                  {
-                    fill: #323130;
-                    font-size: 12px;
-                    font-weight: 600;
-                  }
-              dominantBaseline="auto"
-              textAnchor="end"
-              x={-60.58001193073337}
-              y={-13.19326170710649}
-            >
-              43%
-            </text>
-          </g>
-          
+                {
+                  fill: #323130;
+                  font-size: 12px;
+                  font-weight: 600;
+                }
+            dominantBaseline="auto"
+            textAnchor="end"
+            x={-60.58001193073337}
+            y={-13.19326170710649}
+          >
+            43%
+          </text>
         </g>
-      </svg>
-    </div>
+        
+      </g>
+    </svg>
   </div>
   <span
     className="ms-layer"
@@ -2961,6 +2956,7 @@ exports[`DonutChart snapShot testing Should render gradients on arcs 1`] = `
   <div
     className=
         ms-FocusZone
+        chartWrapper
         &:focus {
           outline: none;
         }
@@ -2970,192 +2966,190 @@ exports[`DonutChart snapShot testing Should render gradients on arcs 1`] = `
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
-    <div>
-      <svg
-        aria-label="Donut chart example"
-        className=
+    <svg
+      aria-label="Donut chart example"
+      className=
 
-            {
-              alignment-adjust: center;
-              box-sizing: content-box;
-              display: block;
-              height: 200px;
-              overflow: visible;
-              width: 200px;
-            }
+          {
+            alignment-adjust: center;
+            box-sizing: content-box;
+            display: block;
+            height: 200px;
+            overflow: visible;
+            width: 200px;
+          }
+    >
+      <g
+        transform="translate(100, 100)"
       >
-        <g
-          transform="translate(100, 100)"
-        >
-          <g>
+        <g>
+          <path
+            aria-label="2020/04/30, 20000."
+            className=
+
+                {
+                  cursor: default;
+                  fill: transparent;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1first20000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+          <clipPath
+            id="Arc_clip4#4760D5_#637CEF"
+          >
             <path
-              aria-label="2020/04/30, 20000."
+              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+            />
+          </clipPath>
+          <foreignObject
+            clipPath="url(#Arc_clip4#4760D5_#637CEF)"
+            height="100%"
+            width="100%"
+            x="-50%"
+            y="-50%"
+          >
+            <div
               className=
 
                   {
-                    cursor: default;
-                    fill: transparent;
+                    background: conic-gradient(
+                            from 0rad,
+                            #4760D5,
+                            #637CEF 1.2167664052268437rad
+                          );
+                    height: 100%;
                     opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
+                    width: 100%;
                   }
-              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1first20000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
             />
-            <clipPath
-              id="Arc_clip4#4760D5_#637CEF"
-            >
-              <path
-                d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
-              />
-            </clipPath>
-            <foreignObject
-              clipPath="url(#Arc_clip4#4760D5_#637CEF)"
-              height="100%"
-              width="100%"
-              x="-50%"
-              y="-50%"
-            >
-              <div
-                className=
+          </foreignObject>
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/20, 39000."
+            className=
 
-                    {
-                      background: conic-gradient(
-                              from 0rad,
-                              #4760D5,
-                              #637CEF 1.2167664052268437rad
-                            );
-                      height: 100%;
-                      opacity: 1;
-                      width: 100%;
-                    }
-              />
-            </foreignObject>
-          </g>
-          <g>
+                {
+                  cursor: default;
+                  fill: transparent;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1second39000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+          <clipPath
+            id="Arc_clip5#795AA6_#9373C0"
+          >
             <path
-              aria-label="2020/04/20, 39000."
+              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+            />
+          </clipPath>
+          <foreignObject
+            clipPath="url(#Arc_clip5#795AA6_#9373C0)"
+            height="100%"
+            width="100%"
+            x="-50%"
+            y="-50%"
+          >
+            <div
               className=
 
                   {
-                    cursor: default;
-                    fill: transparent;
+                    background: conic-gradient(
+                            from 1.2167664052268437rad,
+                            #795AA6,
+                            #9373C0 2.3536944901923453rad
+                          );
+                    height: 100%;
                     opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
+                    width: 100%;
                   }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1second39000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
             />
-            <clipPath
-              id="Arc_clip5#795AA6_#9373C0"
-            >
-              <path
-                d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
-              />
-            </clipPath>
-            <foreignObject
-              clipPath="url(#Arc_clip5#795AA6_#9373C0)"
-              height="100%"
-              width="100%"
-              x="-50%"
-              y="-50%"
-            >
-              <div
-                className=
+          </foreignObject>
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/25, 45000."
+            className=
 
-                    {
-                      background: conic-gradient(
-                              from 1.2167664052268437rad,
-                              #795AA6,
-                              #9373C0 2.3536944901923453rad
-                            );
-                      height: 100%;
-                      opacity: 1;
-                      width: 100%;
-                    }
-              />
-            </foreignObject>
-          </g>
-          <g>
+                {
+                  cursor: default;
+                  fill: transparent;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1third45000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+          <clipPath
+            id="Arc_clip6#159195_#2AA0A4"
+          >
             <path
-              aria-label="2020/04/25, 45000."
+              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+            />
+          </clipPath>
+          <foreignObject
+            clipPath="url(#Arc_clip6#159195_#2AA0A4)"
+            height="100%"
+            width="100%"
+            x="-50%"
+            y="-50%"
+          >
+            <div
               className=
 
                   {
-                    cursor: default;
-                    fill: transparent;
+                    background: conic-gradient(
+                            from 3.5704608954191888rad,
+                            #159195,
+                            #2AA0A4 2.7127244117603975rad
+                          );
+                    height: 100%;
                     opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
+                    width: 100%;
                   }
-              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1third45000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
             />
-            <clipPath
-              id="Arc_clip6#159195_#2AA0A4"
-            >
-              <path
-                d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
-              />
-            </clipPath>
-            <foreignObject
-              clipPath="url(#Arc_clip6#159195_#2AA0A4)"
-              height="100%"
-              width="100%"
-              x="-50%"
-              y="-50%"
-            >
-              <div
-                className=
-
-                    {
-                      background: conic-gradient(
-                              from 3.5704608954191888rad,
-                              #159195,
-                              #2AA0A4 2.7127244117603975rad
-                            );
-                      height: 100%;
-                      opacity: 1;
-                      width: 100%;
-                    }
-              />
-            </foreignObject>
-          </g>
-          
+          </foreignObject>
         </g>
-      </svg>
-    </div>
+        
+      </g>
+    </svg>
   </div>
   <span
     className="ms-layer"
@@ -3567,6 +3561,7 @@ exports[`DonutChart snapShot testing Should render rounded corners on arcs 1`] =
   <div
     className=
         ms-FocusZone
+        chartWrapper
         &:focus {
           outline: none;
         }
@@ -3576,105 +3571,103 @@ exports[`DonutChart snapShot testing Should render rounded corners on arcs 1`] =
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
-    <div>
-      <svg
-        aria-label="Donut chart example"
-        className=
+    <svg
+      aria-label="Donut chart example"
+      className=
 
-            {
-              alignment-adjust: center;
-              box-sizing: content-box;
-              display: block;
-              height: 200px;
-              overflow: visible;
-              width: 200px;
-            }
+          {
+            alignment-adjust: center;
+            box-sizing: content-box;
+            display: block;
+            height: 200px;
+            overflow: visible;
+            width: 200px;
+          }
+    >
+      <g
+        transform="translate(100, 100)"
       >
-        <g
-          transform="translate(100, 100)"
-        >
-          <g>
-            <path
-              aria-label="2020/04/30, 20000."
-              className=
+        <g>
+          <path
+            aria-label="2020/04/30, 20000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #E5E5E5;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M0.97,-96.949A3,3,0,0,1,4.092,-99.916A100,100,0,0,1,92.301,-38.477A3,3,0,0,1,90.6,-34.52L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1first20000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/20, 39000."
-              className=
+                {
+                  cursor: default;
+                  fill: #E5E5E5;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M0.97,-96.949A3,3,0,0,1,4.092,-99.916A100,100,0,0,1,92.301,-38.477A3,3,0,0,1,90.6,-34.52L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1first20000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/20, 39000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #0078D4;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M91.272,-32.701A3,3,0,0,1,95.138,-30.801A100,100,0,0,1,-37.828,92.569A3,3,0,0,1,-39.434,88.572L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1second39000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/25, 45000."
-              className=
+                {
+                  cursor: default;
+                  fill: #0078D4;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M91.272,-32.701A3,3,0,0,1,95.138,-30.801A100,100,0,0,1,-37.828,92.569A3,3,0,0,1,-39.434,88.572L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1second39000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/25, 45000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #DADADA;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M-41.197,87.766A3,3,0,0,1,-45.271,89.166A100,100,0,0,1,-4.092,-99.916A3,3,0,0,1,-0.97,-96.949L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1third45000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          
+                {
+                  cursor: default;
+                  fill: #DADADA;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M-41.197,87.766A3,3,0,0,1,-45.271,89.166A100,100,0,0,1,-4.092,-99.916A3,3,0,0,1,-0.97,-96.949L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1third45000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
         </g>
-      </svg>
-    </div>
+        
+      </g>
+    </svg>
   </div>
   <span
     className="ms-layer"
@@ -4086,6 +4079,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
   <div
     className=
         ms-FocusZone
+        chartWrapper
         &:focus {
           outline: none;
         }
@@ -4095,104 +4089,102 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
-    <div>
-      <svg
-        aria-label="Donut chart example"
-        className=
+    <svg
+      aria-label="Donut chart example"
+      className=
 
-            {
-              alignment-adjust: center;
-              box-sizing: content-box;
-              display: block;
-              height: 200px;
-              overflow: visible;
-              width: 200px;
-            }
+          {
+            alignment-adjust: center;
+            box-sizing: content-box;
+            display: block;
+            height: 200px;
+            overflow: visible;
+            width: 200px;
+          }
+    >
+      <g
+        transform="translate(100, 100)"
       >
-        <g
-          transform="translate(100, 100)"
-        >
-          <g>
-            <path
-              aria-label="2020/04/30, 20000."
-              className=
+        <g>
+          <path
+            aria-label="2020/04/30, 20000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #E5E5E5;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M1.141,-99.993A100,100,0,0,1,93.397,-35.736L51.182,-20.134A55,55,0,0,0,1.141,-54.988Z"
-              data-is-focusable={true}
-              id="_Pie_1first20000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/20, 39000."
-              className=
+                {
+                  cursor: default;
+                  fill: #E5E5E5;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M1.141,-99.993A100,100,0,0,1,93.397,-35.736L51.182,-20.134A55,55,0,0,0,1.141,-54.988Z"
+            data-is-focusable={true}
+            id="_Pie_1first20000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/20, 39000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #0078D4;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M94.188,-33.595A100,100,0,0,1,-40.544,91.412L-21.828,50.483A55,55,0,0,0,51.974,-17.993Z"
-              data-is-focusable={true}
-              id="_Pie_1second39000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/25, 45000."
-              className=
+                {
+                  cursor: default;
+                  fill: #0078D4;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M94.188,-33.595A100,100,0,0,1,-40.544,91.412L-21.828,50.483A55,55,0,0,0,51.974,-17.993Z"
+            data-is-focusable={true}
+            id="_Pie_1second39000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/25, 45000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #DADADA;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M-42.619,90.463A100,100,0,0,1,-1.141,-99.993L-1.141,-54.988A55,55,0,0,0,-23.904,49.534Z"
-              data-is-focusable={true}
-              id="_Pie_1third45000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
+                {
+                  cursor: default;
+                  fill: #DADADA;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M-42.619,90.463A100,100,0,0,1,-1.141,-99.993L-1.141,-54.988A55,55,0,0,0,-23.904,49.534Z"
+            data-is-focusable={true}
+            id="_Pie_1third45000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
         </g>
-      </svg>
-    </div>
+      </g>
+    </svg>
   </div>
   <span
     className="ms-layer"
@@ -4604,6 +4596,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color
   <div
     className=
         ms-FocusZone
+        chartWrapper
         &:focus {
           outline: none;
         }
@@ -4613,105 +4606,103 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
-    <div>
-      <svg
-        aria-label="Donut chart example"
-        className=
+    <svg
+      aria-label="Donut chart example"
+      className=
 
-            {
-              alignment-adjust: center;
-              box-sizing: content-box;
-              display: block;
-              height: 200px;
-              overflow: visible;
-              width: 200px;
-            }
+          {
+            alignment-adjust: center;
+            box-sizing: content-box;
+            display: block;
+            height: 200px;
+            overflow: visible;
+            width: 200px;
+          }
+    >
+      <g
+        transform="translate(100, 100)"
       >
-        <g
-          transform="translate(100, 100)"
-        >
-          <g>
-            <path
-              aria-label="2020/04/30, 20000."
-              className=
+        <g>
+          <path
+            aria-label="2020/04/30, 20000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #637cef;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1first20000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/20, 39000."
-              className=
+                {
+                  cursor: default;
+                  fill: #637cef;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1first20000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/20, 39000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #e3008c;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1second39000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/25, 45000."
-              className=
+                {
+                  cursor: default;
+                  fill: #e3008c;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1second39000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/25, 45000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #2aa0a4;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1third45000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          
+                {
+                  cursor: default;
+                  fill: #2aa0a4;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1third45000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
         </g>
-      </svg>
-    </div>
+        
+      </g>
+    </svg>
   </div>
   <span
     className="ms-layer"
@@ -5123,6 +5114,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
   <div
     className=
         ms-FocusZone
+        chartWrapper
         &:focus {
           outline: none;
         }
@@ -5132,105 +5124,103 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
-    <div>
-      <svg
-        aria-label="Donut chart example"
-        className=
+    <svg
+      aria-label="Donut chart example"
+      className=
 
-            {
-              alignment-adjust: center;
-              box-sizing: content-box;
-              display: block;
-              height: 200px;
-              overflow: visible;
-              width: 200px;
-            }
+          {
+            alignment-adjust: center;
+            box-sizing: content-box;
+            display: block;
+            height: 200px;
+            overflow: visible;
+            width: 200px;
+          }
+    >
+      <g
+        transform="translate(100, 100)"
       >
-        <g
-          transform="translate(100, 100)"
-        >
-          <g>
-            <path
-              aria-label="2020/04/30, 20000."
-              className=
+        <g>
+          <path
+            aria-label="2020/04/30, 20000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #E5E5E5;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1first20000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/20, 39000."
-              className=
+                {
+                  cursor: default;
+                  fill: #E5E5E5;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1first20000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/20, 39000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #0078D4;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1second39000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/25, 45000."
-              className=
+                {
+                  cursor: default;
+                  fill: #0078D4;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1second39000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/25, 45000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #DADADA;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1third45000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          
+                {
+                  cursor: default;
+                  fill: #DADADA;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1third45000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
         </g>
-      </svg>
-    </div>
+        
+      </g>
+    </svg>
   </div>
   <span
     className="ms-layer"
@@ -5642,6 +5632,7 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
   <div
     className=
         ms-FocusZone
+        chartWrapper
         &:focus {
           outline: none;
         }
@@ -5651,105 +5642,103 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
-    <div>
-      <svg
-        aria-label="Donut chart example"
-        className=
+    <svg
+      aria-label="Donut chart example"
+      className=
 
-            {
-              alignment-adjust: center;
-              box-sizing: content-box;
-              display: block;
-              height: 200px;
-              overflow: visible;
-              width: 200px;
-            }
+          {
+            alignment-adjust: center;
+            box-sizing: content-box;
+            display: block;
+            height: 200px;
+            overflow: visible;
+            width: 200px;
+          }
+    >
+      <g
+        transform="translate(100, 100)"
       >
-        <g
-          transform="translate(100, 100)"
-        >
-          <g>
-            <path
-              aria-label="2020/04/30, 20000."
-              className=
+        <g>
+          <path
+            aria-label="2020/04/30, 20000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #E5E5E5;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1first20000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/20, 39000."
-              className=
+                {
+                  cursor: default;
+                  fill: #E5E5E5;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1first20000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/20, 39000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #0078D4;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1second39000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/25, 45000."
-              className=
+                {
+                  cursor: default;
+                  fill: #0078D4;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1second39000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/25, 45000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #DADADA;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1third45000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          
+                {
+                  cursor: default;
+                  fill: #DADADA;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1third45000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
         </g>
-      </svg>
-    </div>
+        
+      </g>
+    </svg>
   </div>
   <span
     className="ms-layer"
@@ -5778,6 +5767,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
   <div
     className=
         ms-FocusZone
+        chartWrapper
         &:focus {
           outline: none;
         }
@@ -5787,105 +5777,103 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
-    <div>
-      <svg
-        aria-label="Donut chart example"
-        className=
+    <svg
+      aria-label="Donut chart example"
+      className=
 
-            {
-              alignment-adjust: center;
-              box-sizing: content-box;
-              display: block;
-              height: 200px;
-              overflow: visible;
-              width: 200px;
-            }
+          {
+            alignment-adjust: center;
+            box-sizing: content-box;
+            display: block;
+            height: 200px;
+            overflow: visible;
+            width: 200px;
+          }
+    >
+      <g
+        transform="translate(100, 100)"
       >
-        <g
-          transform="translate(100, 100)"
-        >
-          <g>
-            <path
-              aria-label="2020/04/30, 20000."
-              className=
+        <g>
+          <path
+            aria-label="2020/04/30, 20000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #E5E5E5;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1first20000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/20, 39000."
-              className=
+                {
+                  cursor: default;
+                  fill: #E5E5E5;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1first20000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/20, 39000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #0078D4;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1second39000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/25, 45000."
-              className=
+                {
+                  cursor: default;
+                  fill: #0078D4;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1second39000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/25, 45000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #DADADA;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1third45000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          
+                {
+                  cursor: default;
+                  fill: #DADADA;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1third45000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
         </g>
-      </svg>
-    </div>
+        
+      </g>
+    </svg>
   </div>
   <span
     className="ms-layer"
@@ -6297,6 +6285,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
   <div
     className=
         ms-FocusZone
+        chartWrapper
         &:focus {
           outline: none;
         }
@@ -6306,105 +6295,103 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
   >
-    <div>
-      <svg
-        aria-label="Donut chart example"
-        className=
+    <svg
+      aria-label="Donut chart example"
+      className=
 
-            {
-              alignment-adjust: center;
-              box-sizing: content-box;
-              display: block;
-              height: 200px;
-              overflow: visible;
-              width: 200px;
-            }
+          {
+            alignment-adjust: center;
+            box-sizing: content-box;
+            display: block;
+            height: 200px;
+            overflow: visible;
+            width: 200px;
+          }
+    >
+      <g
+        transform="translate(100, 100)"
       >
-        <g
-          transform="translate(100, 100)"
-        >
-          <g>
-            <path
-              aria-label="2020/04/30, 20000."
-              className=
+        <g>
+          <path
+            aria-label="2020/04/30, 20000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #E5E5E5;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1first20000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/20, 39000."
-              className=
+                {
+                  cursor: default;
+                  fill: #E5E5E5;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1first20000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/20, 39000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #0078D4;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1second39000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          <g>
-            <path
-              aria-label="2020/04/25, 45000."
-              className=
+                {
+                  cursor: default;
+                  fill: #0078D4;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1second39000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
+        </g>
+        <g>
+          <path
+            aria-label="2020/04/25, 45000."
+            className=
 
-                  {
-                    cursor: default;
-                    fill: #DADADA;
-                    opacity: 1;
-                    outline: transparent;
-                    stroke: #ffffff;
-                  }
-                  &::-moz-focus-inner {
-                    border: 0;
-                  }
-              d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
-              data-is-focusable={true}
-              id="_Pie_1third45000"
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseMove={[Function]}
-              onMouseOver={[Function]}
-              role="img"
-            />
-          </g>
-          
+                {
+                  cursor: default;
+                  fill: #DADADA;
+                  opacity: 1;
+                  outline: transparent;
+                  stroke: #ffffff;
+                }
+                &::-moz-focus-inner {
+                  border: 0;
+                }
+            d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
+            data-is-focusable={true}
+            id="_Pie_1third45000"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseMove={[Function]}
+            onMouseOver={[Function]}
+            role="img"
+          />
         </g>
-      </svg>
-    </div>
+        
+      </g>
+    </svg>
   </div>
   <span
     className="ms-layer"
diff --git a/packages/charts/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap b/packages/charts/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
index 5dab0bf43a88d3..f44132cd3b3afa 100644
--- a/packages/charts/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
+++ b/packages/charts/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
@@ -21,100 +21,99 @@ exports[`Donut chart interactions Should hide callout on mouse leave 1`] = `
     <div
       class=
           ms-FocusZone
+          chartWrapper
           &:focus {
             outline: none;
           }
       data-focuszone-id="FocusZone3"
       data-tabster="{\\"uncontrolled\\": {}}"
     >
-      <div>
-        <svg
-          aria-label="Donut chart example"
-          class=
+      <svg
+        aria-label="Donut chart example"
+        class=
 
-              {
-                alignment-adjust: center;
-                box-sizing: content-box;
-                display: block;
-                height: -40px;
-                overflow: visible;
-                width: 0px;
-              }
-          focusable="false"
-          viewBox="0 0 0 0"
+            {
+              alignment-adjust: center;
+              box-sizing: content-box;
+              display: block;
+              height: -40px;
+              overflow: visible;
+              width: 0px;
+            }
+        focusable="false"
+        viewBox="0 0 0 0"
+      >
+        <g
+          transform="translate(0, -20)"
         >
-          <g
-            transform="translate(0, -20)"
-          >
-            <g>
-              <path
-                aria-label="2020/04/30, 20000."
-                class=
+          <g>
+            <path
+              aria-label="2020/04/30, 20000."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #E5E5E5;
-                      opacity: 1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
-                data-is-focusable="true"
-                id="_Pie_1first20000"
-                role="img"
-                tabindex="0"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="2020/04/20, 39000."
-                class=
+                  {
+                    cursor: default;
+                    fill: #E5E5E5;
+                    opacity: 1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
+              data-is-focusable="true"
+              id="_Pie_1first20000"
+              role="img"
+              tabindex="0"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="2020/04/20, 39000."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #0078D4;
-                      opacity: 1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
-                data-is-focusable="true"
-                id="_Pie_1second39000"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
-            <g>
-              <path
-                aria-label="2020/04/25, 45000."
-                class=
+                  {
+                    cursor: default;
+                    fill: #0078D4;
+                    opacity: 1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
+              data-is-focusable="true"
+              id="_Pie_1second39000"
+              role="img"
+              tabindex="-1"
+            />
+          </g>
+          <g>
+            <path
+              aria-label="2020/04/25, 45000."
+              class=
 
-                    {
-                      cursor: default;
-                      fill: #DADADA;
-                      opacity: 1;
-                      outline: transparent;
-                      stroke: #ffffff;
-                    }
-                    &::-moz-focus-inner {
-                      border: 0;
-                    }
-                d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
-                data-is-focusable="true"
-                id="_Pie_1third45000"
-                role="img"
-                tabindex="-1"
-              />
-            </g>
+                  {
+                    cursor: default;
+                    fill: #DADADA;
+                    opacity: 1;
+                    outline: transparent;
+                    stroke: #ffffff;
+                  }
+                  &::-moz-focus-inner {
+                    border: 0;
+                  }
+              d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
+              data-is-focusable="true"
+              id="_Pie_1third45000"
+              role="img"
+              tabindex="-1"
+            />
           </g>
-        </svg>
-      </div>
+        </g>
+      </svg>
     </div>
     <div
       class=
@@ -670,100 +669,99 @@ exports[`Donut chart interactions Should reflect theme change 1`] = `
       <div
         class=
             ms-FocusZone
+            chartWrapper
             &:focus {
               outline: none;
             }
         data-focuszone-id="FocusZone6"
         data-tabster="{\\"uncontrolled\\": {}}"
       >
-        <div>
-          <svg
-            aria-label="Donut chart example"
-            class=
+        <svg
+          aria-label="Donut chart example"
+          class=
 
-                {
-                  alignment-adjust: center;
-                  box-sizing: content-box;
-                  display: block;
-                  height: -40px;
-                  overflow: visible;
-                  width: 0px;
-                }
-            focusable="false"
-            viewBox="0 0 0 0"
+              {
+                alignment-adjust: center;
+                box-sizing: content-box;
+                display: block;
+                height: -40px;
+                overflow: visible;
+                width: 0px;
+              }
+          focusable="false"
+          viewBox="0 0 0 0"
+        >
+          <g
+            transform="translate(0, -20)"
           >
-            <g
-              transform="translate(0, -20)"
-            >
-              <g>
-                <path
-                  aria-label="2020/04/30, 20000."
-                  class=
+            <g>
+              <path
+                aria-label="2020/04/30, 20000."
+                class=
 
-                      {
-                        cursor: default;
-                        fill: #E5E5E5;
-                        opacity: 1;
-                        outline: transparent;
-                        stroke: #1b1a19;
-                      }
-                      &::-moz-focus-inner {
-                        border: 0;
-                      }
-                  d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
-                  data-is-focusable="true"
-                  id="_Pie_4first20000"
-                  role="img"
-                  tabindex="0"
-                />
-              </g>
-              <g>
-                <path
-                  aria-label="2020/04/20, 39000."
-                  class=
+                    {
+                      cursor: default;
+                      fill: #E5E5E5;
+                      opacity: 1;
+                      outline: transparent;
+                      stroke: #1b1a19;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
+                data-is-focusable="true"
+                id="_Pie_4first20000"
+                role="img"
+                tabindex="0"
+              />
+            </g>
+            <g>
+              <path
+                aria-label="2020/04/20, 39000."
+                class=
 
-                      {
-                        cursor: default;
-                        fill: #0078D4;
-                        opacity: 1;
-                        outline: transparent;
-                        stroke: #1b1a19;
-                      }
-                      &::-moz-focus-inner {
-                        border: 0;
-                      }
-                  d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
-                  data-is-focusable="true"
-                  id="_Pie_4second39000"
-                  role="img"
-                  tabindex="-1"
-                />
-              </g>
-              <g>
-                <path
-                  aria-label="2020/04/25, 45000."
-                  class=
+                    {
+                      cursor: default;
+                      fill: #0078D4;
+                      opacity: 1;
+                      outline: transparent;
+                      stroke: #1b1a19;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
+                data-is-focusable="true"
+                id="_Pie_4second39000"
+                role="img"
+                tabindex="-1"
+              />
+            </g>
+            <g>
+              <path
+                aria-label="2020/04/25, 45000."
+                class=
 
-                      {
-                        cursor: default;
-                        fill: #DADADA;
-                        opacity: 1;
-                        outline: transparent;
-                        stroke: #1b1a19;
-                      }
-                      &::-moz-focus-inner {
-                        border: 0;
-                      }
-                  d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
-                  data-is-focusable="true"
-                  id="_Pie_4third45000"
-                  role="img"
-                  tabindex="-1"
-                />
-              </g>
+                    {
+                      cursor: default;
+                      fill: #DADADA;
+                      opacity: 1;
+                      outline: transparent;
+                      stroke: #1b1a19;
+                    }
+                    &::-moz-focus-inner {
+                      border: 0;
+                    }
+                d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
+                data-is-focusable="true"
+                id="_Pie_4third45000"
+                role="img"
+                tabindex="-1"
+              />
             </g>
-          </svg>
-        </div>
+          </g>
+        </svg>
       </div>
       <span
         class="ms-layer"
diff --git a/packages/charts/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap b/packages/charts/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap
index 41ff22e9be5407..d07bd70f270beb 100644
--- a/packages/charts/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap
+++ b/packages/charts/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap
@@ -19,6 +19,7 @@ exports[`GaugeChart interaction and accessibility tests should show a callout wh
     <div
       class=
           ms-FocusZone
+          chartWrapper
           &:focus {
             outline: none;
           }
@@ -838,6 +839,7 @@ exports[`GaugeChart snapshot tests should not render min and max values of the g
   <div
     className=
         ms-FocusZone
+        chartWrapper
         &:focus {
           outline: none;
         }
@@ -1382,6 +1384,7 @@ exports[`GaugeChart snapshot tests should not render the legends when the hideLe
   <div
     className=
         ms-FocusZone
+        chartWrapper
         &:focus {
           outline: none;
         }
@@ -1573,6 +1576,7 @@ exports[`GaugeChart snapshot tests should render GaugeChart correctly 1`] = `
   <div
     className=
         ms-FocusZone
+        chartWrapper
         &:focus {
           outline: none;
         }
@@ -2162,6 +2166,7 @@ exports[`GaugeChart snapshot tests should render GaugeChart correctly in dark th
     <div
       className=
           ms-FocusZone
+          chartWrapper
           &:focus {
             outline: none;
           }
@@ -2739,6 +2744,7 @@ exports[`GaugeChart snapshot tests should render GaugeChart correctly when the l
   <div
     className=
         ms-FocusZone
+        chartWrapper
         &:focus {
           outline: none;
         }
@@ -3315,6 +3321,7 @@ exports[`GaugeChart snapshot tests should render a color from DataVizPalette for
   <div
     className=
         ms-FocusZone
+        chartWrapper
         &:focus {
           outline: none;
         }
@@ -3768,6 +3775,7 @@ exports[`GaugeChart snapshot tests should render a placeholder segment when the
   <div
     className=
         ms-FocusZone
+        chartWrapper
         &:focus {
           outline: none;
         }
@@ -4220,6 +4228,7 @@ exports[`GaugeChart snapshot tests should render the chart title correctly 1`] =
   <div
     className=
         ms-FocusZone
+        chartWrapper
         &:focus {
           outline: none;
         }
@@ -4810,6 +4819,7 @@ exports[`GaugeChart snapshot tests should render the chart value in fraction for
   <div
     className=
         ms-FocusZone
+        chartWrapper
         &:focus {
           outline: none;
         }
@@ -5386,6 +5396,7 @@ exports[`GaugeChart snapshot tests should render the sublabel correctly 1`] = `
   <div
     className=
         ms-FocusZone
+        chartWrapper
         &:focus {
           outline: none;
         }