diff --git a/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx b/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx
index c1f2122dd9bae..50994900c88be 100644
--- a/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx
+++ b/packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx
@@ -259,17 +259,18 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
         focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}
         overflowText={this.props.legendsOverflowText}
         {...this.props.legendProps}
-        onChange={this._onLegendSelectionChange}
+        // eslint-disable-next-line react/jsx-no-bind
+        onChange={this._onLegendSelectionChange.bind(this)}
       />
     );
     return legends;
   }
 
-  private _onLegendSelectionChange = (
+  private _onLegendSelectionChange(
     selectedLegends: string[],
     event: React.MouseEvent<HTMLButtonElement>,
     currentLegend?: ILegend,
-  ) => {
+  ): void {
     if (this.props.legendProps?.canSelectMultipleLegends) {
       this.setState({ selectedLegends });
     } else {
@@ -278,7 +279,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
     if (this.props.legendProps?.onChange) {
       this.props.legendProps.onChange(selectedLegends, event, currentLegend);
     }
-  };
+  }
 
   private _isLegendHighlighted = (legend: string): boolean => {
     return this._getHighlightedLegend().indexOf(legend) > -1;
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 1daf5c828b254..376f250005375 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
@@ -125,6 +125,23 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
               role="img"
             />
           </g>
+          <text
+            className=
+
+                {
+                  fill: #323130;
+                  font-size: 24px;
+                  font-weight: 600;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+                  fill: rgb(179, 179, 179);
+                }
+            dominantBaseline="middle"
+            textAnchor="middle"
+            y={5}
+          >
+            20,000
+          </text>
         </g>
       </svg>
     </div>
@@ -814,6 +831,23 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover
               role="img"
             />
           </g>
+          <text
+            className=
+
+                {
+                  fill: #323130;
+                  font-size: 24px;
+                  font-weight: 600;
+                }
+                @media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark){& {
+                  fill: rgb(179, 179, 179);
+                }
+            dominantBaseline="middle"
+            textAnchor="middle"
+            y={5}
+          >
+            20,000
+          </text>
         </g>
       </svg>
     </div>
@@ -1877,22 +1911,6 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
               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
@@ -1919,22 +1937,6 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
               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
@@ -1961,22 +1963,6 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
               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>
         </g>
       </svg>
@@ -2443,22 +2429,6 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
               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
@@ -2485,22 +2455,6 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
               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
@@ -2527,22 +2481,6 @@ exports[`DonutChart snapShot testing Should render arc labels in percentage form
               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>
         </g>
       </svg>
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 5dab0bf43a88d..64796dabf922a 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
@@ -636,498 +636,4 @@ exports[`Donut chart interactions Should hide callout on mouse leave 1`] = `
 </div>
 `;
 
-exports[`Donut chart interactions Should reflect theme change 1`] = `
-<div>
-  <div
-    class=
-
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          background: #1b1a19;
-          color: #f3f2f1;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
-        }
-  >
-    <div
-      class=
-          ms-DonutChart
-          {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
-            align-items: center;
-            display: flex;
-            flex-direction: column;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
-            font-weight: 400;
-            height: 100%;
-            width: 100%;
-          }
-    >
-      <div
-        class=
-            ms-FocusZone
-            &:focus {
-              outline: none;
-            }
-        data-focuszone-id="FocusZone6"
-        data-tabster="{\\"uncontrolled\\": {}}"
-      >
-        <div>
-          <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"
-          >
-            <g
-              transform="translate(0, -20)"
-            >
-              <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: #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>
-            </g>
-          </svg>
-        </div>
-      </div>
-      <span
-        class="ms-layer"
-      />
-      <div
-        class=
-
-            {
-              padding-top: 16px;
-              width: 0px;
-            }
-      >
-        <div
-          class=
-
-              {
-                align-items: center;
-                margin-bottom: 0;
-                margin-left: -8px;
-                margin-right: 0;
-                margin-top: -8px;
-                white-space: nowrap;
-                width: 100%;
-              }
-        >
-          <div>
-            <div
-              style="position: relative;"
-            >
-              <div
-                data-automation-id="visibleContent"
-                style="position: fixed; visibility: hidden;"
-              >
-                <div
-                  aria-label="Legends"
-                  aria-multiselectable="false"
-                  class=
-                      ms-FocusZone
-                      &:focus {
-                        outline: none;
-                      }
-                  data-focuszone-id="FocusZone10"
-                  data-tabster="{\\"uncontrolled\\": {}}"
-                  role="listbox"
-                >
-                  <div
-                    class=
-                        ms-OverflowSet
-                        {
-                          display: flex;
-                          flex-wrap: wrap;
-                          justify-content: center;
-                          position: relative;
-                        }
-                    role="group"
-                  >
-                    <div
-                      class=
-                          ms-OverflowSet-item
-                          {
-                            display: inherit;
-                            flex-shrink: 0;
-                          }
-                      role="none"
-                    >
-                      <button
-                        aria-label="first"
-                        aria-posinset="1"
-                        aria-selected="false"
-                        aria-setsize="3"
-                        class=
-
-                            {
-                              align-items: center;
-                              background: none;
-                              border: none;
-                              cursor: pointer;
-                              display: flex;
-                              outline: transparent;
-                              padding-bottom: 8px;
-                              padding-left: 8px;
-                              padding-right: 8px;
-                              padding-top: 8px;
-                              position: relative;
-                              text-transform: capitalize;
-                            }
-                            &::-moz-focus-inner {
-                              border: 0;
-                            }
-                            .ms-Fabric--isFocusVisible &:focus:after {
-                              border: 1px solid transparent;
-                              bottom: 1px;
-                              content: "";
-                              left: 1px;
-                              outline: 1px solid #a19f9d;
-                              position: absolute;
-                              right: 1px;
-                              top: 1px;
-                              z-index: 1;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                              outline-color: #a19f9d;
-                            }
-                            :host(.ms-Fabric--isFocusVisible) &:focus:after {
-                              border: 1px solid transparent;
-                              bottom: 1px;
-                              content: "";
-                              left: 1px;
-                              outline: 1px solid #a19f9d;
-                              position: absolute;
-                              right: 1px;
-                              top: 1px;
-                              z-index: 1;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after {
-                              outline-color: #a19f9d;
-                            }
-                        data-is-focusable="true"
-                        role="option"
-                        tabindex="0"
-                      >
-                        <div
-                          class=
-
-                              {
-                                background-color: #E5E5E5;
-                                border-color: #E5E5E5;
-                                border: 1px solid;
-                                content: ;
-                                height: 12px;
-                                margin-right: 8px;
-                                width: 12px;
-                              }
-                              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                                content: linear-gradient(to right, #E5E5E5, #E5E5E5);
-                                opacity: ;
-                              }
-                        />
-                        <div
-                          class=
-
-                              {
-                                -moz-osx-font-smoothing: grayscale;
-                                -webkit-font-smoothing: antialiased;
-                                color: #f3f2f1;
-                                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                                font-size: 12px;
-                                font-weight: 400;
-                                line-height: 16px;
-                                opacity: ;
-                              }
-                        >
-                          first
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      class=
-                          ms-OverflowSet-item
-                          {
-                            display: inherit;
-                            flex-shrink: 0;
-                          }
-                      role="none"
-                    >
-                      <button
-                        aria-label="second"
-                        aria-posinset="2"
-                        aria-selected="false"
-                        aria-setsize="3"
-                        class=
-
-                            {
-                              align-items: center;
-                              background: none;
-                              border: none;
-                              cursor: pointer;
-                              display: flex;
-                              outline: transparent;
-                              padding-bottom: 8px;
-                              padding-left: 8px;
-                              padding-right: 8px;
-                              padding-top: 8px;
-                              position: relative;
-                              text-transform: capitalize;
-                            }
-                            &::-moz-focus-inner {
-                              border: 0;
-                            }
-                            .ms-Fabric--isFocusVisible &:focus:after {
-                              border: 1px solid transparent;
-                              bottom: 1px;
-                              content: "";
-                              left: 1px;
-                              outline: 1px solid #a19f9d;
-                              position: absolute;
-                              right: 1px;
-                              top: 1px;
-                              z-index: 1;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                              outline-color: #a19f9d;
-                            }
-                            :host(.ms-Fabric--isFocusVisible) &:focus:after {
-                              border: 1px solid transparent;
-                              bottom: 1px;
-                              content: "";
-                              left: 1px;
-                              outline: 1px solid #a19f9d;
-                              position: absolute;
-                              right: 1px;
-                              top: 1px;
-                              z-index: 1;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after {
-                              outline-color: #a19f9d;
-                            }
-                        data-is-focusable="true"
-                        role="option"
-                        tabindex="-1"
-                      >
-                        <div
-                          class=
-
-                              {
-                                background-color: #0078D4;
-                                border-color: #0078D4;
-                                border: 1px solid;
-                                content: ;
-                                height: 12px;
-                                margin-right: 8px;
-                                width: 12px;
-                              }
-                              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                                content: linear-gradient(to right, #0078D4, #0078D4);
-                                opacity: ;
-                              }
-                        />
-                        <div
-                          class=
-
-                              {
-                                -moz-osx-font-smoothing: grayscale;
-                                -webkit-font-smoothing: antialiased;
-                                color: #f3f2f1;
-                                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                                font-size: 12px;
-                                font-weight: 400;
-                                line-height: 16px;
-                                opacity: ;
-                              }
-                        >
-                          second
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      class=
-                          ms-OverflowSet-item
-                          {
-                            display: inherit;
-                            flex-shrink: 0;
-                          }
-                      role="none"
-                    >
-                      <button
-                        aria-label="third"
-                        aria-posinset="3"
-                        aria-selected="false"
-                        aria-setsize="3"
-                        class=
-
-                            {
-                              align-items: center;
-                              background: none;
-                              border: none;
-                              cursor: pointer;
-                              display: flex;
-                              outline: transparent;
-                              padding-bottom: 8px;
-                              padding-left: 8px;
-                              padding-right: 8px;
-                              padding-top: 8px;
-                              position: relative;
-                              text-transform: capitalize;
-                            }
-                            &::-moz-focus-inner {
-                              border: 0;
-                            }
-                            .ms-Fabric--isFocusVisible &:focus:after {
-                              border: 1px solid transparent;
-                              bottom: 1px;
-                              content: "";
-                              left: 1px;
-                              outline: 1px solid #a19f9d;
-                              position: absolute;
-                              right: 1px;
-                              top: 1px;
-                              z-index: 1;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.ms-Fabric--isFocusVisible &:focus:after {
-                              outline-color: #a19f9d;
-                            }
-                            :host(.ms-Fabric--isFocusVisible) &:focus:after {
-                              border: 1px solid transparent;
-                              bottom: 1px;
-                              content: "";
-                              left: 1px;
-                              outline: 1px solid #a19f9d;
-                              position: absolute;
-                              right: 1px;
-                              top: 1px;
-                              z-index: 1;
-                            }
-                            @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host(.ms-Fabric--isFocusVisible) &:focus:after {
-                              outline-color: #a19f9d;
-                            }
-                        data-is-focusable="true"
-                        role="option"
-                        tabindex="-1"
-                      >
-                        <div
-                          class=
-
-                              {
-                                background-color: #DADADA;
-                                border-color: #DADADA;
-                                border: 1px solid;
-                                content: ;
-                                height: 12px;
-                                margin-right: 8px;
-                                width: 12px;
-                              }
-                              @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
-                                content: linear-gradient(to right, #DADADA, #DADADA);
-                                opacity: ;
-                              }
-                        />
-                        <div
-                          class=
-
-                              {
-                                -moz-osx-font-smoothing: grayscale;
-                                -webkit-font-smoothing: antialiased;
-                                color: #f3f2f1;
-                                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                                font-size: 12px;
-                                font-weight: 400;
-                                line-height: 16px;
-                                opacity: ;
-                              }
-                        >
-                          third
-                        </div>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
+exports[`Donut chart interactions Should reflect theme change 1`] = `<div />`;