diff --git a/change/@fluentui-react-charting-99df84c1-d269-31c1-4d11-33w9pp1ry3l.json b/change/@fluentui-react-charting-99df84c1-d269-31c1-4d11-33w9pp1ry3l.json
new file mode 100644
index 0000000000000..143e4c70e6a77
--- /dev/null
+++ b/change/@fluentui-react-charting-99df84c1-d269-31c1-4d11-33w9pp1ry3l.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat(react-charting): Add prop to regulate removal of default annotation styling",
+  "packageName": "@fluentui/react-charting",
+  "email": "120183316+srmukher@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/charts/react-charting/src/components/AnnotationOnlyChart/AnnotationOnlyChart.tsx b/packages/charts/react-charting/src/components/AnnotationOnlyChart/AnnotationOnlyChart.tsx
index af9ac4de6c4e3..010a78c86e4e0 100644
--- a/packages/charts/react-charting/src/components/AnnotationOnlyChart/AnnotationOnlyChart.tsx
+++ b/packages/charts/react-charting/src/components/AnnotationOnlyChart/AnnotationOnlyChart.tsx
@@ -217,7 +217,12 @@ export const AnnotationOnlyChart: React.FC<IAnnotationOnlyChartProps> = props =>
             )}
             <div className={contentClassName} role="presentation">
               {hasAnnotations ? (
-                <ChartAnnotationLayer annotations={resolvedAnnotations} context={context} theme={theme} />
+                <ChartAnnotationLayer
+                  annotations={resolvedAnnotations}
+                  context={context}
+                  theme={theme}
+                  hideDefaultStyles={true}
+                />
               ) : null}
             </div>
           </div>
diff --git a/packages/charts/react-charting/src/components/AnnotationOnlyChart/__snapshots__/AnnotationOnlyChart.test.tsx.snap b/packages/charts/react-charting/src/components/AnnotationOnlyChart/__snapshots__/AnnotationOnlyChart.test.tsx.snap
index 6ac48e8d42a88..6205941bd9be0 100644
--- a/packages/charts/react-charting/src/components/AnnotationOnlyChart/__snapshots__/AnnotationOnlyChart.test.tsx.snap
+++ b/packages/charts/react-charting/src/components/AnnotationOnlyChart/__snapshots__/AnnotationOnlyChart.test.tsx.snap
@@ -118,10 +118,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with all props 1`] = `
                           -moz-osx-font-smoothing: grayscale;
                           -webkit-font-smoothing: antialiased;
                           align-items: center;
-                          background-color: rgba(255, 255, 255, 0.8);
                           border-radius: 4px;
-                          border: 1px solid #edebe9;
-                          box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
                           color: #323130;
                           display: flex;
                           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -178,10 +175,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with all props 1`] = `
                           -moz-osx-font-smoothing: grayscale;
                           -webkit-font-smoothing: antialiased;
                           align-items: center;
-                          background-color: rgba(255, 255, 255, 0.8);
                           border-radius: 4px;
-                          border: 1px solid #edebe9;
-                          box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
                           color: #323130;
                           display: flex;
                           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -228,10 +222,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with all props 1`] = `
                       -moz-osx-font-smoothing: grayscale;
                       -webkit-font-smoothing: antialiased;
                       align-items: center;
-                      background-color: rgba(255, 255, 255, 0.8);
                       border-radius: 4px;
-                      border: 1px solid #edebe9;
-                      box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
                       color: #323130;
                       display: flex;
                       font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -278,10 +269,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with all props 1`] = `
                       -moz-osx-font-smoothing: grayscale;
                       -webkit-font-smoothing: antialiased;
                       align-items: center;
-                      background-color: rgba(255, 255, 255, 0.8);
                       border-radius: 4px;
-                      border: 1px solid #edebe9;
-                      box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
                       color: #323130;
                       display: flex;
                       font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -430,10 +418,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with default props 1`] =
                           -moz-osx-font-smoothing: grayscale;
                           -webkit-font-smoothing: antialiased;
                           align-items: center;
-                          background-color: rgba(255, 255, 255, 0.8);
                           border-radius: 4px;
-                          border: 1px solid #edebe9;
-                          box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
                           color: #323130;
                           display: flex;
                           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -490,10 +475,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with default props 1`] =
                           -moz-osx-font-smoothing: grayscale;
                           -webkit-font-smoothing: antialiased;
                           align-items: center;
-                          background-color: rgba(255, 255, 255, 0.8);
                           border-radius: 4px;
-                          border: 1px solid #edebe9;
-                          box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
                           color: #323130;
                           display: flex;
                           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -540,10 +522,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with default props 1`] =
                       -moz-osx-font-smoothing: grayscale;
                       -webkit-font-smoothing: antialiased;
                       align-items: center;
-                      background-color: rgba(255, 255, 255, 0.8);
                       border-radius: 4px;
-                      border: 1px solid #edebe9;
-                      box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
                       color: #323130;
                       display: flex;
                       font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -590,10 +569,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with default props 1`] =
                       -moz-osx-font-smoothing: grayscale;
                       -webkit-font-smoothing: antialiased;
                       align-items: center;
-                      background-color: rgba(255, 255, 255, 0.8);
                       border-radius: 4px;
-                      border: 1px solid #edebe9;
-                      box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
                       color: #323130;
                       display: flex;
                       font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
diff --git a/packages/charts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.styles.ts b/packages/charts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.styles.ts
index 57390e9bbec4e..93cf825335395 100644
--- a/packages/charts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.styles.ts
+++ b/packages/charts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.styles.ts
@@ -11,6 +11,7 @@ import { ChartAnnotationArrowHead } from '../../../types/IChartAnnotation';
 export interface IChartAnnotationLayerStyles {
   root?: IStyle;
   annotation?: IStyle;
+  annotationNoDefaults?: IStyle;
   connectorLayer?: IStyle;
   measurement?: IStyle;
   annotationContent?: IStyle;
@@ -79,12 +80,28 @@ export const getStyles: IStyleFunctionOrObject<IChartAnnotationLayerStyleProps,
         alignItems: 'center',
         justifyContent: 'center',
         textAlign: 'center',
-        backgroundColor: defaultBackground,
         color: defaultTextColor,
         padding: DEFAULT_ANNOTATION_PADDING,
         borderRadius: 4,
+        whiteSpace: 'pre-wrap',
+        zIndex: 2,
+        backgroundColor: defaultBackground,
         boxShadow: theme.effects.elevation4,
         border: `1px solid ${defaultBorderColor}`,
+      },
+    ],
+    annotationNoDefaults: [
+      theme.fonts.small,
+      {
+        position: 'absolute',
+        pointerEvents: 'none',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        textAlign: 'center',
+        color: defaultTextColor,
+        padding: DEFAULT_ANNOTATION_PADDING,
+        borderRadius: 4,
         whiteSpace: 'pre-wrap',
         zIndex: 2,
       },
diff --git a/packages/charts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.tsx b/packages/charts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.tsx
index ad4c65c688997..3ad82bd0a96c3 100644
--- a/packages/charts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.tsx
+++ b/packages/charts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.tsx
@@ -345,7 +345,7 @@ const resolveCoordinates = (
 };
 
 export const ChartAnnotationLayer: React.FC<IChartAnnotationLayerProps> = React.memo(props => {
-  const { annotations: annotationsProp, theme, context, className } = props;
+  const { annotations: annotationsProp, theme, context, className, hideDefaultStyles } = props;
 
   const classNames = getClassNames(getStyles, { theme, className });
   const idPrefix = React.useMemo(() => getId('chart-annotation'), []);
@@ -439,9 +439,16 @@ export const ChartAnnotationLayer: React.FC<IChartAnnotationLayerProps> = React.
 
     const containerStyle: React.CSSProperties = {
       maxWidth: layout?.maxWidth,
-      ...(hasCustomBackground && {
-        backgroundColor: applyOpacityToColor(baseBackgroundColor, backgroundOpacity),
-      }),
+      ...(hasCustomBackground
+        ? {
+            backgroundColor: applyOpacityToColor(baseBackgroundColor, backgroundOpacity),
+          }
+        : !hideDefaultStyles && {
+            backgroundColor: applyOpacityToColor(
+              theme.semanticColors.bodyBackground,
+              DEFAULT_ANNOTATION_BACKGROUND_OPACITY,
+            ),
+          }),
       borderColor: annotation.style?.borderColor,
       borderWidth: annotation.style?.borderWidth,
       borderStyle: annotation.style?.borderStyle ?? (annotation.style?.borderColor ? 'solid' : undefined),
@@ -542,6 +549,8 @@ export const ChartAnnotationLayer: React.FC<IChartAnnotationLayerProps> = React.
       ...containerStyle,
     };
 
+    const annotationClass = hideDefaultStyles ? classNames.annotationNoDefaults : classNames.annotation;
+
     if (!isMeasurementValid) {
       measurementElements.push(
         <div
@@ -554,7 +563,7 @@ export const ChartAnnotationLayer: React.FC<IChartAnnotationLayerProps> = React.
               }
             }
           }}
-          className={css(classNames.annotation, classNames.measurement, layout?.className, annotation.style?.className)}
+          className={css(annotationClass, classNames.measurement, layout?.className, annotation.style?.className)}
           style={measurementStyle}
           aria-hidden={true}
           data-annotation-key={key}
@@ -581,7 +590,7 @@ export const ChartAnnotationLayer: React.FC<IChartAnnotationLayerProps> = React.
         data-annotation-key={key}
       >
         <div
-          className={css(classNames.annotation, layout?.className, annotation.style?.className)}
+          className={css(annotationClass, layout?.className, annotation.style?.className)}
           style={containerStyle}
           data-annotation-key={key}
         >
diff --git a/packages/charts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.types.ts b/packages/charts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.types.ts
index b4e1a8bcc1c2e..b76393cca0ae1 100644
--- a/packages/charts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.types.ts
+++ b/packages/charts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.types.ts
@@ -36,6 +36,11 @@ export interface IChartAnnotationLayerProps {
   context: IChartAnnotationContext;
   theme: ITheme;
   className?: string;
+  /**
+   * When true, removes default border, shadow, and background styling from annotations.
+   * @default false
+   */
+  hideDefaultStyles?: boolean;
 }
 
 export interface IResolvedAnnotationPosition {