[HorizontalBarChartWithAxis] Initialization of state variables and up…

…dating checks (#33532)
microsoft · Dec 31, 2024 · db1eb85 · db1eb85
1 parent 73b823a
commit db1eb85
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/change/@fluentui-react-charting-c1fdbc01-292c-4f2d-b96e-1e417b7c89da.json b/change/@fluentui-react-charting-c1fdbc01-292c-4f2d-b96e-1e417b7c89da.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Initialization of state variables and updating for HorizontalBarChartWithAxis chart",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/...ct-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx b/...ct-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx
@@ -100,7 +100,7 @@ export class HorizontalBarChartWithAxisBase
       activeXdataPoint: null,
       YValueHover: [],
       hoverXValue: '',
-      selectedLegends: [],
+      selectedLegends: props.legendProps?.selectedLegends || [],
     };
     this._calloutId = getId('callout');
     this._tooltipId = getId('HBCWATooltipID_');
@@ -605,7 +605,7 @@ export class HorizontalBarChartWithAxisBase
     const { useSingleColor = false } = this.props;
     const bars = this._points.map((point: IHorizontalBarChartWithAxisDataPoint, index: number) => {
       let shouldHighlight = true;
-      if (this._getHighlightedLegend().length > 0) {
+      if (this.state.isLegendHovered || this.state.isLegendSelected) {
         shouldHighlight = this._isLegendHighlighted(point.legend);
       }
       this._classNames = getClassNames(this.props.styles!, {