diff --git a/change/@fluentui-react-charting-e105accc-fa3e-466e-8341-eca4d3a8ff6f.json b/change/@fluentui-react-charting-e105accc-fa3e-466e-8341-eca4d3a8ff6f.json
new file mode 100644
index 0000000000000..ff0bc4ac4f907
--- /dev/null
+++ b/change/@fluentui-react-charting-e105accc-fa3e-466e-8341-eca4d3a8ff6f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix focus order issue in legends overflow callout",
+  "packageName": "@fluentui/react-charting",
+  "email": "kumarkshitij@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/Legends/Legends.base.tsx b/packages/react-charting/src/components/Legends/Legends.base.tsx
index ed42d3755508f..6ccbb97b52525 100644
--- a/packages/react-charting/src/components/Legends/Legends.base.tsx
+++ b/packages/react-charting/src/components/Legends/Legends.base.tsx
@@ -6,7 +6,7 @@ import { classNamesFunction, find, getNativeProps, buttonProperties } from '@flu
 import { ResizeGroup } from '@fluentui/react/lib/ResizeGroup';
 import { IProcessedStyleSet } from '@fluentui/react/lib/Styling';
 import { OverflowSet, IOverflowSetItemProps } from '@fluentui/react/lib/OverflowSet';
-import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
+import { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus';
 import {
   ILegend,
   ILegendsProps,
@@ -234,6 +234,8 @@ export class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
           'aria-multiselectable': canSelectMultipleLegends,
         })}
         direction={FocusZoneDirection.vertical}
+        handleTabKey={FocusZoneTabbableElements.all}
+        isCircularNavigation={true}
         {...this.props.focusZonePropsInHoverCard}
         className={classNames.hoverCardRoot}
       >