code · pull · Jan 14, 2026 · Jan 14, 2026 · Jan 14, 2026
diff --git a/change/@fluentui-chart-web-components-bb1b0527-799b-4646-8872-14e1fd3966e3.json b/change/@fluentui-chart-web-components-bb1b0527-799b-4646-8872-14e1fd3966e3.json
diff --git a/change/@fluentui-react-charting-99df84c1-d269-31c1-4d11-33w9pp1ry3l.json 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": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-web-components-1c227a93-f7e4-4902-a58c-cbe54cc6cd98.json b/change/@fluentui-web-components-1c227a93-f7e4-4902-a58c-cbe54cc6cd98.json
diff --git a/packages/charts/chart-web-components/CHANGELOG.json b/packages/charts/chart-web-components/CHANGELOG.json
@@ -1,6 +1,29 @@
 {
   "name": "@fluentui/chart-web-components",
   "entries": [
+    {
+      "date": "Wed, 14 Jan 2026 04:07:26 GMT",
+      "tag": "@fluentui/chart-web-components_v0.0.61",
+      "version": "0.0.61",
+      "comments": {
+        "none": [
+          {
+            "author": "[email protected]",
+            "package": "@fluentui/chart-web-components",
+            "commit": "a5b354084d7de7c0c0567b96624590ba513f6d4c",
+            "comment": "chore: upgrade to storybook 9"
+          }
+        ],
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/chart-web-components",
+            "comment": "Bump @fluentui/web-components to v3.0.0-rc.3",
+            "commit": "a5b354084d7de7c0c0567b96624590ba513f6d4c"
+          }
+        ]
+      }
+    },
     {
       "date": "Mon, 12 Jan 2026 04:07:48 GMT",
       "tag": "@fluentui/chart-web-components_v0.0.60",

diff --git a/packages/charts/chart-web-components/CHANGELOG.md b/packages/charts/chart-web-components/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/chart-web-components
 
-This log was last generated on Mon, 12 Jan 2026 04:07:48 GMT and should not be manually modified.
+This log was last generated on Wed, 14 Jan 2026 04:07:26 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.0.61](https://github.com/microsoft/fluentui/tree/@fluentui/chart-web-components_v0.0.61)
+
+Wed, 14 Jan 2026 04:07:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/chart-web-components_v0.0.60..@fluentui/chart-web-components_v0.0.61)
+
+### Patches
+
+- Bump @fluentui/web-components to v3.0.0-rc.3 ([PR #35459](https://github.com/microsoft/fluentui/pull/35459) by beachball)
+
 ## [0.0.60](https://github.com/microsoft/fluentui/tree/@fluentui/chart-web-components_v0.0.60)
 
 Mon, 12 Jan 2026 04:07:48 GMT 

diff --git a/packages/charts/chart-web-components/package.json b/packages/charts/chart-web-components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@fluentui/chart-web-components",
   "description": "A library of Fluent Chart Web Components",
-  "version": "0.0.60",
+  "version": "0.0.61",
   "author": {
     "name": "Microsoft"
   },
@@ -70,7 +70,7 @@
   "dependencies": {
     "@microsoft/fast-web-utilities": "^6.0.0",
     "@fluentui/tokens": "^1.0.0-alpha.22",
-    "@fluentui/web-components": "^3.0.0-rc.2",
+    "@fluentui/web-components": "^3.0.0-rc.3",
     "@types/d3-selection": "^3.0.0",
     "@types/d3-shape": "^3.0.0",
     "d3-selection": "^3.0.0",

diff --git 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/...arting/src/components/AnnotationOnlyChart/__snapshots__/AnnotationOnlyChart.test.tsx.snap b/...arting/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/...react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.styles.ts b/...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/...harts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.tsx b/...harts/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/.../react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.types.ts b/.../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 {

diff --git a/packages/web-components/CHANGELOG.json b/packages/web-components/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "@fluentui/web-components",
   "entries": [
+    {
+      "date": "Wed, 14 Jan 2026 04:07:26 GMT",
+      "tag": "@fluentui/web-components_v3.0.0-rc.3",
+      "version": "3.0.0-rc.3",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "[email protected]",
+            "package": "@fluentui/web-components",
+            "commit": "a5b354084d7de7c0c0567b96624590ba513f6d4c",
+            "comment": "chore: upgrade to storybook 9"
+          }
+        ]
+      }
+    },
     {
       "date": "Mon, 12 Jan 2026 04:07:48 GMT",
       "tag": "@fluentui/web-components_v3.0.0-rc.2",

diff --git a/packages/web-components/CHANGELOG.md b/packages/web-components/CHANGELOG.md
@@ -1,9 +1,18 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Mon, 12 Jan 2026 04:07:48 GMT and should not be manually modified.
+This log was last generated on Wed, 14 Jan 2026 04:07:26 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-rc.3](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.3)
+
+Wed, 14 Jan 2026 04:07:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.2..@fluentui/web-components_v3.0.0-rc.3)
+
+### Changes
+
+- chore: upgrade to storybook 9 ([PR #35459](https://github.com/microsoft/fluentui/pull/35459) by [email protected])
+
 ## [3.0.0-rc.2](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.2)
 
 Mon, 12 Jan 2026 04:07:48 GMT 

diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@fluentui/web-components",
   "description": "A library of Fluent Web Components",
-  "version": "3.0.0-rc.2",
+  "version": "3.0.0-rc.3",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"