Legend hover updates value inside donut chart circle (microsoft#14055)

* When legend is hovered, center of donut chart updates to the value cooresponding to the legend.

* Change files

* Modified operator

* Add return statement

change/@uifabric-charting-2020-07-14-17-46-29-master.json

@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "When legend is hovered, center of donut chart updates to the value cooresponding to the legend.",
+  "packageName": "@uifabric/charting",
+  "email": "57419611+hki-237@users.noreply.github.com",
+  "dependentChangeType": "patch",
+  "date": "2020-07-15T00:46:29.551Z"
+}

packages/charting/src/components/DonutChart/DonutChart.base.tsx

@@ -130,7 +130,7 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
                 focusedArcId={this.state.focusedArcId || ''}
                 href={href}
                 calloutId={this._calloutId}
-                valueInsideDonut={valueInsideDonut}
+                valueInsideDonut={this._valueInsideDonut(valueInsideDonut!, chartData!)}
                 theme={theme!}
               />
             </svg>
@@ -263,4 +263,19 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
   private _hoverLeave(): void {
     this.setState({ showHover: false, activeLegend: '', selectedLegend: 'none', focusedArcId: '' });
   }
+
+  private _valueInsideDonut(valueInsideDonut: string | number | undefined, data: IChartDataPoint[]) {
+    if (valueInsideDonut !== undefined && this.state.activeLegend !== '' && !this.state.showHover) {
+      let legendValue = valueInsideDonut;
+      data!.map((point: IChartDataPoint, index: number) => {
+        if (point.legend === this.state.activeLegend) {
+          legendValue = point.data!;
+        }
+        return;
+      });
+      return legendValue;
+    } else {
+      return valueInsideDonut;
+    }
+  }
 }