Introduce a new annotated component

Author: AnweshaKnowles

change/@fluentui-react-charts-d340ad00-e0cf-4529-88fd-dfeab85f9305.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "\u0016feat(react-charts) add a variant to horizontal bar charts with annotations",
+  "packageName": "@fluentui/react-charts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -223,10 +223,11 @@ export interface Chart {
 }
 
 // @public
-export type ChartDataMode = 'default' | 'fraction' | 'percentage';
+export type ChartDataMode = 'default' | 'fraction' | 'percentage' | 'hidden';
 
 // @public (undocumented)
 export interface ChartDataPoint {
+    annotationInformation?: string[];
     callOutAccessibilityData?: AccessibilityProps;
     color?: string;
     data?: number;
@@ -715,14 +716,18 @@ export const HorizontalBarChart: React_2.FunctionComponent<HorizontalBarChartPro
 
 // @public
 export interface HorizontalBarChartProps extends React_2.RefAttributes<HTMLDivElement> {
+    allowHoverOnSegment?: boolean;
     barHeight?: number;
     calloutProps?: ChartPopoverProps;
     calloutPropsPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => ChartPopoverProps;
     chartDataMode?: ChartDataMode;
     className?: string;
     color?: string;
+    containerWidth?: number;
     culture?: string;
     data?: ChartProps[];
+    // (undocumented)
+    displayAnnotationIcon?: (segment: ChartDataPoint, index: number) => React_2.ReactNode;
     hideLabels?: boolean;
     hideRatio?: boolean[];
     hideTooltip?: boolean;
@@ -731,6 +736,7 @@ export interface HorizontalBarChartProps extends React_2.RefAttributes<HTMLDivEl
     // (undocumented)
     legendsOverflowText?: any;
     onRenderCalloutPerHorizontalBar?: (props: ChartDataPoint) => JSX.Element | undefined;
+    showAnnotationsInPercentage?: boolean;
     showTriangle?: boolean;
     styles?: HorizontalBarChartStyles;
     variant?: HorizontalBarChartVariant;
@@ -743,6 +749,7 @@ export interface HorizontalBarChartStyles {
     barWrapper: string;
     benchmarkContainer: string;
     chart: string;
+    chartAnnotationText: string;
     chartDataTextDenominator: string;
     chartTitle: string;
     chartTitleLeft: string;
@@ -1245,6 +1252,13 @@ export interface Schema {
     plotlySchema: any;
 }
 
+// @public (undocumented)
+export type segment = {
+    percent: number;
+    adjustedPercent: number;
+    rawValue: number;
+};
+
 // @public (undocumented)
 export const Shape: React_2.FunctionComponent<ShapeProps>;