fix(react-charts): Remove border and shading from annotations only chart

change/@fluentui-react-charts-31031217-ace6-4b9d-91e6-11a0e0ba87a4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(react-charts): Add prop to regulate removal of default annotation styling",
+  "packageName": "@fluentui/react-charts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charts/library/etc/react-charts.api.md

@@ -386,6 +386,7 @@ export interface ChartAnnotationLayerProps {
     className?: string;
     // (undocumented)
     context: ChartAnnotationContext;
+    hideDefaultStyles?: boolean;
 }
 
 // @public (undocumented)

packages/charts/react-charts/library/src/components/AnnotationOnlyChart/AnnotationOnlyChart.tsx

@@ -191,7 +191,9 @@ export const AnnotationOnlyChart: React.FC<AnnotationOnlyChartProps> = props =>
               </span>
             )}
             <div className={classes.content} style={contentStyle} role="presentation">
-              {hasAnnotations ? <ChartAnnotationLayer annotations={resolvedAnnotations} context={context} /> : null}
+              {hasAnnotations ? (
+                <ChartAnnotationLayer annotations={resolvedAnnotations} context={context} hideDefaultStyles={true} />
+              ) : null}
             </div>
           </div>
         </foreignObject>

packages/charts/react-charts/library/src/components/AnnotationOnlyChart/__snapshots__/AnnotationOnlyChart.test.tsx.snap

@@ -58,9 +58,8 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with all props 1`] = `
                   y="170"
                 >
                   <div
-                    class="fui-chartAnnotationLayer__annotation"
+                    class=""
                     data-annotation-key="annotation-1"
-                    style="background-color: var(--colorNeutralBackground1);"
                   >
                     <div
                       aria-label="Test Annotation 1"
@@ -83,7 +82,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with all props 1`] = `
                   y="250"
                 >
                   <div
-                    class="fui-chartAnnotationLayer__annotation"
+                    class=""
                     data-annotation-key="annotation-2"
                     style="background-color: rgba(255, 255, 255, 0.8);"
                   >
@@ -102,10 +101,10 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with all props 1`] = `
               </svg>
               <div
                 aria-hidden="true"
-                class="fui-chartAnnotationLayer__annotation fui-chartAnnotationLayer__measurement"
+                class="fui-chartAnnotationLayer__measurement"
                 data-annotation-key="annotation-1"
                 data-chart-annotation-measurement="true"
-                style="position: absolute; left: 210px; top: 170px; pointer-events: none; visibility: hidden; background-color: var(--colorNeutralBackground1);"
+                style="position: absolute; left: 210px; top: 170px; pointer-events: none; visibility: hidden;"
               >
                 <div
                   class="fui-chartAnnotationLayer__annotationContent"
@@ -116,7 +115,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with all props 1`] = `
               </div>
               <div
                 aria-hidden="true"
-                class="fui-chartAnnotationLayer__annotation fui-chartAnnotationLayer__measurement"
+                class="fui-chartAnnotationLayer__measurement"
                 data-annotation-key="annotation-2"
                 data-chart-annotation-measurement="true"
                 style="position: absolute; left: 90px; top: 250px; pointer-events: none; visibility: hidden; background-color: rgba(255, 255, 255, 0.8);"
@@ -185,9 +184,8 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with default props 1`] =
                   y="170"
                 >
                   <div
-                    class="fui-chartAnnotationLayer__annotation"
+                    class=""
                     data-annotation-key="annotation-1"
-                    style="background-color: var(--colorNeutralBackground1);"
                   >
                     <div
                       aria-label="Test Annotation 1"
@@ -210,7 +208,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with default props 1`] =
                   y="250"
                 >
                   <div
-                    class="fui-chartAnnotationLayer__annotation"
+                    class=""
                     data-annotation-key="annotation-2"
                     style="background-color: rgba(255, 255, 255, 0.8);"
                   >
@@ -229,10 +227,10 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with default props 1`] =
               </svg>
               <div
                 aria-hidden="true"
-                class="fui-chartAnnotationLayer__annotation fui-chartAnnotationLayer__measurement"
+                class="fui-chartAnnotationLayer__measurement"
                 data-annotation-key="annotation-1"
                 data-chart-annotation-measurement="true"
-                style="position: absolute; left: 210px; top: 170px; pointer-events: none; visibility: hidden; background-color: var(--colorNeutralBackground1);"
+                style="position: absolute; left: 210px; top: 170px; pointer-events: none; visibility: hidden;"
               >
                 <div
                   class="fui-chartAnnotationLayer__annotationContent"
@@ -243,7 +241,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with default props 1`] =
               </div>
               <div
                 aria-hidden="true"
-                class="fui-chartAnnotationLayer__annotation fui-chartAnnotationLayer__measurement"
+                class="fui-chartAnnotationLayer__measurement"
                 data-annotation-key="annotation-2"
                 data-chart-annotation-measurement="true"
                 style="position: absolute; left: 90px; top: 250px; pointer-events: none; visibility: hidden; background-color: rgba(255, 255, 255, 0.8);"

packages/charts/react-charts/library/src/components/CommonComponents/Annotations/ChartAnnotationLayer.tsx

@@ -394,7 +394,7 @@ const resolveCoordinates = (
 };
 
 export const ChartAnnotationLayer: React.FC<ChartAnnotationLayerProps> = React.memo(props => {
-  const { annotations: annotationsProp, context } = props;
+  const { annotations: annotationsProp, context, hideDefaultStyles } = props;
 
   const classes = useChartAnnotationLayerStyles(props);
   const idPrefix = useId('chart-annotation');
@@ -497,6 +497,8 @@ export const ChartAnnotationLayer: React.FC<ChartAnnotationLayerProps> = React.m
               preserveOriginalOpacity: annotation.style?.opacity === undefined,
             }),
           }
+        : hideDefaultStyles
+        ? {}
         : {
             backgroundColor: applyOpacityToColor(tokens.colorNeutralBackground1, DEFAULT_ANNOTATION_BACKGROUND_OPACITY),
           }),
@@ -600,6 +602,8 @@ export const ChartAnnotationLayer: React.FC<ChartAnnotationLayerProps> = React.m
       ...containerStyle,
     };
 
+    const annotationClass = hideDefaultStyles ? classes.annotationNoDefaults : classes.annotation;
+
     if (!isMeasurementValid) {
       measurementElements.push(
         <div
@@ -612,12 +616,7 @@ export const ChartAnnotationLayer: React.FC<ChartAnnotationLayerProps> = React.m
               }
             }
           }}
-          className={mergeClasses(
-            classes.annotation,
-            classes.measurement,
-            layout?.className,
-            annotation.style?.className,
-          )}
+          className={mergeClasses(annotationClass, classes.measurement, layout?.className, annotation.style?.className)}
           style={measurementStyle}
           aria-hidden={true}
           data-annotation-key={key}
@@ -644,7 +643,7 @@ export const ChartAnnotationLayer: React.FC<ChartAnnotationLayerProps> = React.m
         data-annotation-key={key}
       >
         <div
-          className={mergeClasses(classes.annotation, layout?.className, annotation.style?.className)}
+          className={mergeClasses(annotationClass, layout?.className, annotation.style?.className)}
           style={containerStyle}
           data-annotation-key={key}
         >

packages/charts/react-charts/library/src/components/CommonComponents/Annotations/ChartAnnotationLayer.types.ts

@@ -34,6 +34,11 @@ export interface ChartAnnotationLayerProps {
   annotations?: ChartAnnotation[];
   context: ChartAnnotationContext;
   className?: string;
+  /**
+   * When true, removes default border, shadow, and background styling from annotations.
+   * @default false
+   */
+  hideDefaultStyles?: boolean;
 }
 
 export interface ResolvedAnnotationPosition {

packages/charts/react-charts/library/src/components/CommonComponents/Annotations/useChartAnnotationLayer.styles.ts

@@ -9,6 +9,7 @@ import { ChartAnnotationArrowHead } from '../../../types/ChartAnnotation';
 export interface ChartAnnotationLayerStyles {
   root?: string;
   annotation?: string;
+  annotationNoDefaults?: string;
   connectorLayer?: string;
   measurement?: string;
   annotationContent?: string;
@@ -76,6 +77,7 @@ export const getDefaultConnectorStrokeColor = (): string => tokens.colorNeutralF
 export const chartAnnotationLayerClassNames: SlotClassNames<ChartAnnotationLayerStyles> = {
   root: 'fui-chartAnnotationLayer__root',
   annotation: 'fui-chartAnnotationLayer__annotation',
+  annotationNoDefaults: 'fui-chartAnnotationLayer__annotationNoDefaults',
   connectorLayer: 'fui-chartAnnotationLayer__connectorLayer',
   measurement: 'fui-chartAnnotationLayer__measurement',
   annotationContent: 'fui-chartAnnotationLayer__annotationContent',
@@ -88,6 +90,24 @@ export const chartAnnotationLayerClassNames: SlotClassNames<ChartAnnotationLayer
 /**
  * Base Styles
  */
+const annotationBaseStyles = {
+  ...typographyStyles.caption1,
+  position: 'absolute',
+  pointerEvents: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  textAlign: 'center',
+  color: tokens.colorNeutralForeground1,
+  paddingTop: '4px',
+  paddingBottom: '4px',
+  paddingLeft: '8px',
+  paddingRight: '8px',
+  borderRadius: tokens.borderRadiusMedium,
+  whiteSpace: 'pre-wrap',
+  zIndex: 2,
+} as const;
+
 const useStyles = makeStyles({
   root: {
     position: 'absolute',
@@ -102,23 +122,12 @@ const useStyles = makeStyles({
     zIndex: 1,
   },
   annotation: {
-    ...typographyStyles.caption1,
-    position: 'absolute',
-    pointerEvents: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    textAlign: 'center',
-    color: tokens.colorNeutralForeground1,
-    paddingTop: '4px',
-    paddingBottom: '4px',
-    paddingLeft: '8px',
-    paddingRight: '8px',
-    borderRadius: tokens.borderRadiusMedium,
+    ...annotationBaseStyles,
     boxShadow: tokens.shadow16,
     border: `1px solid ${tokens.colorNeutralStroke1}`,
-    whiteSpace: 'pre-wrap',
-    zIndex: 2,
+  },
+  annotationNoDefaults: {
+    ...annotationBaseStyles,
   },
   connectorLayer: {
     position: 'absolute',