@fluentui/react-charts 9.3.5 → 9.3.6

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @fluentui/react-charts
 
-This log was last generated on Thu, 06 Nov 2025 14:56:54 GMT and should not be manually modified.
+This log was last generated on Tue, 11 Nov 2025 19:13:26 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.6)
+
+Tue, 11 Nov 2025 19:13:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.5..@fluentui/react-charts_v9.3.6)
+
+### Patches
+
+- add reference lines logic in line and scatter chart ([PR #35474](https://github.com/microsoft/fluentui/pull/35474) by anushgupta@microsoft.com)
+- add chart annotations ([PR #35457](https://github.com/microsoft/fluentui/pull/35457) by anushgupta@microsoft.com)
+- add support for chart only annotation ([PR #35461](https://github.com/microsoft/fluentui/pull/35461) by anushgupta@microsoft.com)
+- fix: adjust chart margin for continuous y-axis tick labels ([PR #35376](https://github.com/microsoft/fluentui/pull/35376) by kumarkshitij@microsoft.com)
+- chore: Bump @griffel/react package. ([PR #35469](https://github.com/microsoft/fluentui/pull/35469) by estebanmu@microsoft.com)
+- Bump @fluentui/react-button to v9.6.12 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.3.3 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
+- Bump @fluentui/react-overflow to v9.6.5 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
+- Bump @fluentui/react-popover to v9.12.12 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.0 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
+- Bump @fluentui/react-tabster to v9.26.10 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
+- Bump @fluentui/react-tooltip to v9.8.11 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
+- Bump @fluentui/react-utilities to v9.25.4 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
+
 ## [9.3.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.5)
 
-Thu, 06 Nov 2025 14:56:54 GMT 
+Thu, 06 Nov 2025 15:01:18 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.4..@fluentui/react-charts_v9.3.5)
 
 ### Patches

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { CurveFactory } from 'd3-shape';
 import type { JSXElement } from '@fluentui/react-utilities';
+import type { Margin } from '@fluentui/chart-utilities';
 import { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import { RefObject } from 'react';
@@ -37,6 +38,50 @@ export declare interface AccessibilityProps {
  */
 export declare function adjustPadding(sankey: SankeyLayoutGenerator, height: number, nodesInColumn: NodesInColumns): void;
 
+export declare const AnnotationOnlyChart: React_2.FC<AnnotationOnlyChartProps>;
+
+/**
+ * Props for the annotation-only chart renderer.
+ */
+export declare interface AnnotationOnlyChartProps {
+    /**
+     * Collection of annotations to render.
+     */
+    annotations: ChartAnnotation[];
+    /** Optional layout title extracted from the Plotly schema. */
+    chartTitle?: string;
+    /** Optional descriptive text for accessibility. */
+    description?: string;
+    /** Desired width in pixels (if absent the chart will grow to fit the container). */
+    width?: number;
+    /** Desired height in pixels. */
+    height?: number;
+    /** Paper/background colour specified in the Plotly layout. */
+    paperBackgroundColor?: string;
+    /** Plot area background colour specified in the Plotly layout. */
+    plotBackgroundColor?: string;
+    /** Global layout font colour. */
+    fontColor?: string;
+    /** Global layout font family. */
+    fontFamily?: string;
+    /** Layout margin converted to padding for the outer wrapper. */
+    margin?: Partial<Margin>;
+    /** Component ref propagated by the DeclarativeChart surface. */
+    componentRef?: React_2.RefObject<Chart>;
+}
+
+export declare interface AnnotationPlotRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
+export declare interface AnnotationPoint {
+    x: number;
+    y: number;
+}
+
 export declare const ARC_PADDING = 2;
 
 export declare const AreaChart: React_2.FunctionComponent<AreaChartProps>;
@@ -378,6 +423,10 @@ export declare interface CartesianChartProps {
      * @default 10
      */
     xAxistickSize?: number;
+    /**
+     * Text annotations rendered on top of the chart area
+     */
+    annotations?: ChartAnnotation[];
     /**
      * defines the space between the tick line and the data label
      * @default 10
@@ -550,6 +599,15 @@ export declare interface CartesianChartProps {
      * Use this to control `tickStep`, `tick0`, etc.
      */
     yAxis?: AxisProps;
+    /**
+     *@default false
+     *Used for showing complete y axis lables   */
+    showYAxisLables?: boolean;
+    /**
+     *@default false
+     *Used for to elipse y axis labes and show tooltip on x axis labels
+     */
+    showYAxisLablesTooltip?: boolean;
 }
 
 /**
@@ -657,10 +715,18 @@ export declare interface CartesianChartStyles {
      * Styles for the chart wrapper div
      */
     chartWrapper?: string;
+    /**
+     * Styles for the element wrapping the svg and overlays for annotation
+     */
+    plotContainer?: string;
     /**
      * Styles for the svg tooltip
      */
     svgTooltip?: string;
+    /**
+     * Styles applied to the annotation layer root element
+     */
+    annotationLayer?: string;
     /**
      * Styles for the chart svg element
      */
@@ -675,6 +741,141 @@ export declare interface Chart {
     toImage?: (opts?: ImageExportOptions) => Promise<string>;
 }
 
+export declare interface ChartAnnotation {
+    /** Optional id for React reconciliation */
+    id?: string;
+    /** Primary textual content */
+    text: string;
+    /** Coordinates describing where the annotation should be anchored */
+    coordinates: ChartAnnotationCoordinate;
+    /** Layout customisation */
+    layout?: ChartAnnotationLayoutProps;
+    /** Visual styling */
+    style?: ChartAnnotationStyleProps;
+    /** Optional connector line that links the annotation to its anchor. */
+    connector?: ChartAnnotationConnectorProps;
+    /** Accessibility metadata */
+    accessibility?: ChartAnnotationAccessibilityProps;
+    /** Optional application specific metadata */
+    data?: Record<string, unknown>;
+}
+
+export declare interface ChartAnnotationAccessibilityProps {
+    /** Accessible label announced by assistive technologies */
+    ariaLabel?: string;
+    /** Accessible description id */
+    ariaDescribedBy?: string;
+    /** Custom role */
+    role?: string;
+}
+
+export declare type ChartAnnotationArrowHead = 'none' | 'start' | 'end' | 'both';
+
+export declare interface ChartAnnotationConnectorProps {
+    /** Distance in pixels between the annotation element and the start of the connector. */
+    startPadding?: number;
+    /** Distance in pixels between the anchor point and the end of the connector. */
+    endPadding?: number;
+    /** Stroke colour for the connector. */
+    strokeColor?: string;
+    /** Stroke width in pixels. */
+    strokeWidth?: number;
+    /** SVG stroke dash array for dashed connectors. */
+    dashArray?: string;
+    /** Arrow head placement. Defaults to `'end'`. */
+    arrow?: ChartAnnotationArrowHead;
+}
+
+export declare interface ChartAnnotationContext {
+    /** Rectangle describing the drawable area of the chart (without margins) */
+    plotRect: AnnotationPlotRect;
+    /** Size of the owning SVG element */
+    svgRect: {
+        width: number;
+        height: number;
+    };
+    /** Indicates if layout should be mirrored */
+    isRtl?: boolean;
+    /** Primary x scale mapping data domain to pixels */
+    xScale?: (value: any) => number;
+    /** Primary y scale mapping data domain to pixels */
+    yScalePrimary?: (value: any) => number;
+    /** Secondary y scale when present */
+    yScaleSecondary?: (value: any) => number;
+}
+
+export declare type ChartAnnotationCoordinate = {
+    /** Cartesian data coordinates mapped through the chart scales or
+     * Normalised coordinates within the plot area (0-1) or
+     * Absolute pixel position relative to the chart's SVG origin
+     */
+    type: 'data' | 'relative' | 'pixel';
+    /** x-axis value in the data domain */
+    x: number | string | Date;
+    /** y-axis value in the data domain */
+    y: number | string | Date;
+    /** Use the secondary y scale when available */
+    yAxis?: 'primary' | 'secondary';
+};
+
+export declare type ChartAnnotationHorizontalAlign = 'start' | 'center' | 'end';
+
+export declare const ChartAnnotationLayer: React_2.FC<ChartAnnotationLayerProps>;
+
+export declare interface ChartAnnotationLayerProps {
+    annotations?: ChartAnnotation[];
+    context: ChartAnnotationContext;
+    className?: string;
+}
+
+export declare interface ChartAnnotationLayoutProps {
+    /** Horizontal alignment of the annotation relative to the anchor point */
+    align?: ChartAnnotationHorizontalAlign;
+    /** Vertical alignment of the annotation relative to the anchor point */
+    verticalAlign?: ChartAnnotationVerticalAlign;
+    /** Horizontal offset in pixels applied after alignment */
+    offsetX?: number;
+    /** Vertical offset in pixels applied after alignment */
+    offsetY?: number;
+    /** Optional maximum width for wrapped text */
+    maxWidth?: number;
+    /** Whether the annotation should remain inside the plot area */
+    clipToBounds?: boolean;
+    /** Additional CSS classes applied to the annotation wrapper */
+    className?: string;
+}
+
+export declare interface ChartAnnotationStyleProps {
+    /** Text colour */
+    textColor?: string;
+    /** Background colour for the annotation container */
+    backgroundColor?: string;
+    /** Border colour */
+    borderColor?: string;
+    /** Border width */
+    borderWidth?: number;
+    /** Border style (solid, dashed, etc.) */
+    borderStyle?: React_2.CSSProperties['borderStyle'];
+    /** Border radius */
+    borderRadius?: number;
+    /** Box shadow applied to annotation */
+    boxShadow?: string;
+    /** Font size override */
+    fontSize?: string;
+    /** Font weight override */
+    fontWeight?: React_2.CSSProperties['fontWeight'];
+    /** Padding around the text. Accepts CSS shorthand notation */
+    padding?: string;
+    /** Opacity for the annotation container */
+    opacity?: number;
+    /** Optional class name applied to the annotation element */
+    className?: string;
+    /** Rotation, in degrees, applied to the annotation container */
+    rotation?: number;
+}
+
+export declare type ChartAnnotationVerticalAlign = 'top' | 'middle' | 'bottom';
+
 /**
  * Chart data mode for chart data text
  * default: show the datapoint.x value
@@ -904,6 +1105,18 @@ export declare interface ColorFillBarsProps {
 
 declare type ColorwayType = 'default' | 'builtin' | 'others' | undefined;
 
+export declare type ConnectorRenderData = {
+    key: string;
+    start: AnnotationPoint;
+    end: AnnotationPoint;
+    strokeColor: string;
+    strokeWidth: number;
+    dashArray?: string;
+    arrow: ChartAnnotationArrowHead;
+    markerSize: number;
+    markerStrokeWidth: number;
+};
+
 /**
  * Used for custom callout data interface. As Area chart callout data will be prepared from given props.data,
  * Those required data passing to onRenderCalloutPerDataPoint and onRenderCalloutPerStack.
@@ -1497,17 +1710,6 @@ export declare interface GanttChartProps extends CartesianChartProps {
      * @default 1/2
      */
     yAxisPadding?: number;
-    /**
-     * If true, truncates y-axis tick labels longer than `noOfCharsToTruncate` with ellipses
-     * and displays them in a tooltip on hover.
-     * @default false
-     */
-    showYAxisLablesTooltip?: boolean;
-    /**
-     * If true, renders full y-axis tick labels without truncation.
-     * @default false
-     */
-    showYAxisLables?: boolean;
     /**
      * If true, enables gradient fills for the bars.
      * @default false
@@ -2102,19 +2304,10 @@ export declare interface HeatMapChartProps extends CartesianChartProps {
      * The prop used to define the culture to localized the numbers
      */
     culture?: string;
-    /**
-     *@default false
-     *Used for showing complete y axis lables   */
-    showYAxisLables?: boolean;
     /**
      * @default alphabetical
      * The prop used to decide order of string axis labels */
     sortOrder?: 'none' | 'alphabetical';
-    /**
-     *@default false
-     *Used for to elipse y axis labes and show tooltip on x axis labels
-     */
-    showYAxisLablesTooltip?: boolean;
 }
 
 /**
@@ -2384,15 +2577,6 @@ export declare interface HorizontalBarChartWithAxisProps extends CartesianChartP
      * it's padding between bar's or lines in the graph
      */
     yAxisPadding?: number;
-    /**
-     *@default false
-     *Used for to elipse y axis labes and show tooltip on x axis labels
-     */
-    showYAxisLablesTooltip?: boolean;
-    /**
-     *@default false
-     *Used for showing complete y axis lables   */
-    showYAxisLables?: boolean;
     /**
      * @default false
      * The prop used to enable gradient fill color for the chart.
@@ -2480,6 +2664,7 @@ export declare interface HorizontalDataPoint {
 
 declare interface IAxisData {
     yAxisDomainValues: number[];
+    yAxisTickText: string[];
 }
 
 /**
@@ -3257,11 +3442,11 @@ export declare interface ModifiedCartesianChartProps extends CartesianChartProps
     /**
      * Get the domain and range values
      */
-    getDomainNRangeValues: (points: LineChartPoints[] | VerticalBarChartDataPoint[] | VerticalStackedBarDataPoint[] | HorizontalBarChartWithAxisDataPoint[] | GroupedVerticalBarChartData[] | HeatMapChartDataPoint[] | GanttChartDataPoint[], margins: Margins, width: number, chartType: ChartTypes, isRTL: boolean, xAxisType: XAxisTypes, barWidth: number, tickValues: Date[] | number[] | string[] | undefined, shiftX: number) => IDomainNRange;
+    getDomainNRangeValues: (points: LineChartPoints[] | VerticalBarChartDataPoint[] | VerticalStackedBarDataPoint[] | HorizontalBarChartWithAxisDataPoint[] | GroupedVerticalBarChartData[] | HeatMapChartDataPoint[] | GanttChartDataPoint[], margins: Margins, width: number, chartType: ChartTypes, isRTL: boolean, xAxisType: XAxisTypes, barWidth: number, tickValues: Date[] | number[] | string[] | undefined) => IDomainNRange;
     /**
      * Create the string y-axis
      */
-    createStringYAxis: (yAxisParams: IYAxisParams, dataPoints: string[], isRtl: boolean, barWidth: number | undefined, chartType?: ChartTypes) => ScaleBand<string>;
+    createStringYAxis: (yAxisParams: IYAxisParams, dataPoints: string[], isRtl: boolean, axisData: IAxisData, barWidth: number | undefined, chartType?: ChartTypes) => ScaleBand<string>;
     /**
      * Controls whether the numeric x-axis domain should be extended to start and end at nice rounded values.
      * @default true
@@ -3326,6 +3511,13 @@ declare interface RenderFunction<P> {
     (props?: P, defaultRender?: (props?: P) => JSXElement | null): JSXElement | null;
 }
 
+export declare interface ResolvedAnnotationPosition {
+    /** Final absolute position after applying layout and offsets */
+    point: AnnotationPoint;
+    /** Raw anchor position before offsets (used for connectors) */
+    anchor: AnnotationPoint;
+}
+
 /**
  * Responsive Child props
  * {@docCategory ResponsiveContainer}
@@ -3657,10 +3849,6 @@ export declare interface ScatterChartProps extends CartesianChartProps {
      * The prop used to define the culture to localized the numbers
      */
     culture?: string;
-    /**
-     * The prop used to define the y axis labels tooltip visibility
-     */
-    showYAxisLablesTooltip?: boolean;
 }
 
 /**
@@ -4107,15 +4295,6 @@ export declare interface VerticalStackedBarChartProps extends CartesianChartProp
      * @default 'default'
      */
     mode?: 'default' | 'plotly';
-    /**
-     *@default false
-     *Used for to elipse y axis labes and show tooltip on x axis labels
-     */
-    showYAxisLablesTooltip?: boolean;
-    /**
-     *@default false
-     *Used for showing complete y axis lables   */
-    showYAxisLables?: boolean;
 }
 
 /**

package/lib/AnnotationOnlyChart.js

@@ -0,0 +1 @@
+export * from './components/AnnotationOnlyChart/index';

package/lib/AnnotationOnlyChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/AnnotationOnlyChart.ts"],"sourcesContent":["export * from './components/AnnotationOnlyChart/index';\n"],"names":[],"mappings":"AAAA,cAAc,yCAAyC"}

package/lib/components/AnnotationOnlyChart/AnnotationOnlyChart.js

@@ -0,0 +1,208 @@
+'use client';
+import * as React from 'react';
+import { ChartAnnotationLayer } from '../CommonComponents/Annotations/ChartAnnotationLayer';
+import { toImage as exportToImage } from '../../utilities/image-export-utils';
+import { useRtl } from '../../utilities';
+import { useAnnotationOnlyChartStyles } from './useAnnotationOnlyChartStyles.styles';
+const DEFAULT_HEIGHT = 650;
+const FALLBACK_WIDTH = 400;
+const buildPadding = (margin)=>{
+    if (!margin) {
+        return undefined;
+    }
+    var _margin_t;
+    const top = (_margin_t = margin.t) !== null && _margin_t !== void 0 ? _margin_t : 0;
+    var _margin_r;
+    const right = (_margin_r = margin.r) !== null && _margin_r !== void 0 ? _margin_r : 0;
+    var _margin_b;
+    const bottom = (_margin_b = margin.b) !== null && _margin_b !== void 0 ? _margin_b : 0;
+    var _margin_l;
+    const left = (_margin_l = margin.l) !== null && _margin_l !== void 0 ? _margin_l : 0;
+    if (top === 0 && right === 0 && bottom === 0 && left === 0) {
+        return undefined;
+    }
+    return `${top}px ${right}px ${bottom}px ${left}px`;
+};
+export const AnnotationOnlyChart = (props)=>{
+    const { annotations, chartTitle, description, width, height, paperBackgroundColor, plotBackgroundColor, fontColor, fontFamily, margin, componentRef } = props;
+    const isRtl = useRtl();
+    const classes = useAnnotationOnlyChartStyles();
+    const containerRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const [measuredWidth, setMeasuredWidth] = React.useState(width !== null && width !== void 0 ? width : 0);
+    const [contentHeight, setContentHeight] = React.useState(height !== null && height !== void 0 ? height : DEFAULT_HEIGHT);
+    React.useEffect(()=>{
+        if (typeof width === 'number' && width > 0) {
+            setMeasuredWidth(width);
+            return;
+        }
+        const node = containerRef.current;
+        if (!node || typeof ResizeObserver === 'undefined') {
+            const rect = node === null || node === void 0 ? void 0 : node.getBoundingClientRect();
+            if (rect && rect.width > 0) {
+                setMeasuredWidth(rect.width);
+            } else {
+                setMeasuredWidth((prev)=>prev > 0 ? prev : FALLBACK_WIDTH);
+            }
+            return;
+        }
+        const observer = new ResizeObserver((entries)=>{
+            const entry = entries[0];
+            if (!entry) {
+                return;
+            }
+            const newWidth = entry.contentRect.width;
+            if (newWidth > 0 && Math.abs(newWidth - measuredWidth) > 0.5) {
+                setMeasuredWidth(newWidth);
+            }
+        });
+        const rect = node.getBoundingClientRect();
+        if (rect.width > 0) {
+            setMeasuredWidth(rect.width);
+        }
+        observer.observe(node);
+        return ()=>observer.disconnect();
+    }, [
+        width,
+        measuredWidth
+    ]);
+    const resolvedWidth = Math.max(measuredWidth || FALLBACK_WIDTH, 1);
+    const resolvedHeight = Math.max(height !== null && height !== void 0 ? height : DEFAULT_HEIGHT, 1);
+    React.useEffect(()=>{
+        const node = contentRef.current;
+        if (!node) {
+            setContentHeight((prev)=>prev > 0 ? prev : resolvedHeight);
+            return;
+        }
+        if (typeof ResizeObserver === 'undefined') {
+            const rect = node.getBoundingClientRect();
+            setContentHeight((prev)=>rect.height > 0 ? rect.height : prev > 0 ? prev : resolvedHeight);
+            return;
+        }
+        const observer = new ResizeObserver((entries)=>{
+            const entry = entries[0];
+            if (!entry) {
+                return;
+            }
+            const newHeight = entry.contentRect.height;
+            if (newHeight > 0) {
+                setContentHeight((prev)=>Math.abs(prev - newHeight) > 0.5 ? newHeight : prev);
+            }
+        });
+        const rect = node.getBoundingClientRect();
+        setContentHeight((prev)=>rect.height > 0 ? rect.height : prev > 0 ? prev : resolvedHeight);
+        observer.observe(node);
+        return ()=>observer.disconnect();
+    }, [
+        resolvedHeight,
+        resolvedWidth,
+        annotations,
+        chartTitle,
+        description,
+        margin,
+        plotBackgroundColor,
+        paperBackgroundColor,
+        fontColor,
+        fontFamily
+    ]);
+    const svgHeight = Math.max(Math.ceil(contentHeight || 0), resolvedHeight);
+    const context = {
+        plotRect: {
+            x: 0,
+            y: 0,
+            width: resolvedWidth,
+            height: resolvedHeight
+        },
+        svgRect: {
+            width: resolvedWidth,
+            height: resolvedHeight
+        },
+        isRtl
+    };
+    const padding = buildPadding(margin);
+    // Inline styles for dynamic values that can't be in makeStyles
+    const rootStyle = React.useMemo(()=>({
+            width: width ? `${width}px` : '100%',
+            minHeight: resolvedHeight,
+            ...paperBackgroundColor && {
+                backgroundColor: paperBackgroundColor
+            },
+            ...fontColor && {
+                color: fontColor
+            },
+            ...fontFamily && {
+                fontFamily
+            },
+            ...padding && {
+                padding
+            }
+        }), [
+        fontColor,
+        fontFamily,
+        paperBackgroundColor,
+        padding,
+        resolvedHeight,
+        width
+    ]);
+    const contentStyle = React.useMemo(()=>({
+            ...plotBackgroundColor && {
+                backgroundColor: plotBackgroundColor
+            }
+        }), [
+        plotBackgroundColor
+    ]);
+    const resolvedAnnotations = annotations !== null && annotations !== void 0 ? annotations : [];
+    const hasAnnotations = resolvedAnnotations.length > 0;
+    const ariaLabel = hasAnnotations ? description !== null && description !== void 0 ? description : chartTitle : undefined;
+    React.useImperativeHandle(componentRef, ()=>{
+        const chartHandle = {
+            chartContainer: containerRef.current,
+            toImage: (opts)=>{
+                if (!containerRef.current) {
+                    return Promise.reject(new Error('Chart container is not defined'));
+                }
+                return exportToImage(containerRef.current, undefined, isRtl, opts);
+            }
+        };
+        return chartHandle;
+    }, [
+        isRtl
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        ref: containerRef,
+        "data-chart-annotation-container": "true"
+    }, /*#__PURE__*/ React.createElement("svg", {
+        width: resolvedWidth,
+        height: svgHeight,
+        viewBox: `0 0 ${resolvedWidth} ${svgHeight}`,
+        style: {
+            width: width ? `${width}px` : '100%',
+            height: `${svgHeight}px`,
+            display: 'block'
+        },
+        role: ariaLabel ? 'img' : undefined,
+        "aria-label": ariaLabel
+    }, /*#__PURE__*/ React.createElement("foreignObject", {
+        x: 0,
+        y: 0,
+        width: resolvedWidth,
+        height: svgHeight
+    }, /*#__PURE__*/ React.createElement("div", {
+        ref: contentRef,
+        className: classes.root,
+        style: rootStyle,
+        "data-chart-annotation-only": "true",
+        "aria-label": ariaLabel
+    }, chartTitle && /*#__PURE__*/ React.createElement("span", {
+        className: classes.title,
+        "aria-hidden": "true"
+    }, chartTitle), /*#__PURE__*/ React.createElement("div", {
+        className: classes.content,
+        style: contentStyle,
+        role: "presentation"
+    }, hasAnnotations ? /*#__PURE__*/ React.createElement(ChartAnnotationLayer, {
+        annotations: resolvedAnnotations,
+        context: context
+    }) : null)))));
+};
+AnnotationOnlyChart.displayName = 'AnnotationOnlyChart';

package/lib/components/AnnotationOnlyChart/AnnotationOnlyChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AnnotationOnlyChart/AnnotationOnlyChart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChartAnnotationLayer } from '../CommonComponents/Annotations/ChartAnnotationLayer';\nimport { toImage as exportToImage } from '../../utilities/image-export-utils';\nimport { useRtl } from '../../utilities';\nimport { useAnnotationOnlyChartStyles } from './useAnnotationOnlyChartStyles.styles';\nimport type { AnnotationOnlyChartProps } from './AnnotationOnlyChart.types';\nimport type { Chart, ImageExportOptions } from '../../types/index';\nimport type { ChartAnnotationContext } from '../CommonComponents/Annotations/ChartAnnotationLayer.types';\n\nconst DEFAULT_HEIGHT = 650;\nconst FALLBACK_WIDTH = 400;\n\nconst buildPadding = (margin: AnnotationOnlyChartProps['margin']): string | undefined => {\n  if (!margin) {\n    return undefined;\n  }\n\n  const top = margin.t ?? 0;\n  const right = margin.r ?? 0;\n  const bottom = margin.b ?? 0;\n  const left = margin.l ?? 0;\n\n  if (top === 0 && right === 0 && bottom === 0 && left === 0) {\n    return undefined;\n  }\n\n  return `${top}px ${right}px ${bottom}px ${left}px`;\n};\n\nexport const AnnotationOnlyChart: React.FC<AnnotationOnlyChartProps> = props => {\n  const {\n    annotations,\n    chartTitle,\n    description,\n    width,\n    height,\n    paperBackgroundColor,\n    plotBackgroundColor,\n    fontColor,\n    fontFamily,\n    margin,\n    componentRef,\n  } = props;\n\n  const isRtl = useRtl();\n  const classes = useAnnotationOnlyChartStyles();\n  const containerRef = React.useRef<HTMLDivElement | null>(null);\n  const contentRef = React.useRef<HTMLDivElement | null>(null);\n  const [measuredWidth, setMeasuredWidth] = React.useState<number>(width ?? 0);\n  const [contentHeight, setContentHeight] = React.useState<number>(height ?? DEFAULT_HEIGHT);\n\n  React.useEffect(() => {\n    if (typeof width === 'number' && width > 0) {\n      setMeasuredWidth(width);\n      return;\n    }\n\n    const node = containerRef.current;\n    if (!node || typeof ResizeObserver === 'undefined') {\n      const rect = node?.getBoundingClientRect();\n      if (rect && rect.width > 0) {\n        setMeasuredWidth(rect.width);\n      } else {\n        setMeasuredWidth(prev => (prev > 0 ? prev : FALLBACK_WIDTH));\n      }\n      return;\n    }\n\n    const observer = new ResizeObserver(entries => {\n      const entry = entries[0];\n      if (!entry) {\n        return;\n      }\n      const newWidth = entry.contentRect.width;\n      if (newWidth > 0 && Math.abs(newWidth - measuredWidth) > 0.5) {\n        setMeasuredWidth(newWidth);\n      }\n    });\n\n    const rect = node.getBoundingClientRect();\n    if (rect.width > 0) {\n      setMeasuredWidth(rect.width);\n    }\n\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [width, measuredWidth]);\n\n  const resolvedWidth = Math.max(measuredWidth || FALLBACK_WIDTH, 1);\n  const resolvedHeight = Math.max(height ?? DEFAULT_HEIGHT, 1);\n\n  React.useEffect(() => {\n    const node = contentRef.current;\n    if (!node) {\n      setContentHeight(prev => (prev > 0 ? prev : resolvedHeight));\n      return;\n    }\n\n    if (typeof ResizeObserver === 'undefined') {\n      const rect = node.getBoundingClientRect();\n      setContentHeight(prev => (rect.height > 0 ? rect.height : prev > 0 ? prev : resolvedHeight));\n      return;\n    }\n\n    const observer = new ResizeObserver(entries => {\n      const entry = entries[0];\n      if (!entry) {\n        return;\n      }\n\n      const newHeight = entry.contentRect.height;\n      if (newHeight > 0) {\n        setContentHeight(prev => (Math.abs(prev - newHeight) > 0.5 ? newHeight : prev));\n      }\n    });\n\n    const rect = node.getBoundingClientRect();\n    setContentHeight(prev => (rect.height > 0 ? rect.height : prev > 0 ? prev : resolvedHeight));\n\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [\n    resolvedHeight,\n    resolvedWidth,\n    annotations,\n    chartTitle,\n    description,\n    margin,\n    plotBackgroundColor,\n    paperBackgroundColor,\n    fontColor,\n    fontFamily,\n  ]);\n\n  const svgHeight = Math.max(Math.ceil(contentHeight || 0), resolvedHeight);\n\n  const context: ChartAnnotationContext = {\n    plotRect: { x: 0, y: 0, width: resolvedWidth, height: resolvedHeight },\n    svgRect: { width: resolvedWidth, height: resolvedHeight },\n    isRtl,\n  };\n\n  const padding = buildPadding(margin);\n\n  // Inline styles for dynamic values that can't be in makeStyles\n  const rootStyle: React.CSSProperties = React.useMemo(\n    () => ({\n      width: width ? `${width}px` : '100%',\n      minHeight: resolvedHeight,\n      ...(paperBackgroundColor && { backgroundColor: paperBackgroundColor }),\n      ...(fontColor && { color: fontColor }),\n      ...(fontFamily && { fontFamily }),\n      ...(padding && { padding }),\n    }),\n    [fontColor, fontFamily, paperBackgroundColor, padding, resolvedHeight, width],\n  );\n\n  const contentStyle: React.CSSProperties = React.useMemo(\n    () => ({\n      ...(plotBackgroundColor && { backgroundColor: plotBackgroundColor }),\n    }),\n    [plotBackgroundColor],\n  );\n\n  const resolvedAnnotations = annotations ?? [];\n  const hasAnnotations = resolvedAnnotations.length > 0;\n  const ariaLabel = hasAnnotations ? description ?? chartTitle : undefined;\n\n  React.useImperativeHandle(\n    componentRef,\n    () => {\n      const chartHandle: Chart = {\n        chartContainer: containerRef.current,\n        toImage: (opts?: ImageExportOptions) => {\n          if (!containerRef.current) {\n            return Promise.reject(new Error('Chart container is not defined'));\n          }\n\n          return exportToImage(containerRef.current, undefined, isRtl, opts);\n        },\n      };\n\n      return chartHandle;\n    },\n    [isRtl],\n  );\n\n  return (\n    <div ref={containerRef} data-chart-annotation-container=\"true\">\n      <svg\n        width={resolvedWidth}\n        height={svgHeight}\n        viewBox={`0 0 ${resolvedWidth} ${svgHeight}`}\n        style={{ width: width ? `${width}px` : '100%', height: `${svgHeight}px`, display: 'block' }}\n        role={ariaLabel ? 'img' : undefined}\n        aria-label={ariaLabel}\n      >\n        <foreignObject x={0} y={0} width={resolvedWidth} height={svgHeight}>\n          <div\n            ref={contentRef}\n            className={classes.root}\n            style={rootStyle}\n            data-chart-annotation-only=\"true\"\n            aria-label={ariaLabel}\n          >\n            {chartTitle && (\n              <span className={classes.title} aria-hidden=\"true\">\n                {chartTitle}\n              </span>\n            )}\n            <div className={classes.content} style={contentStyle} role=\"presentation\">\n              {hasAnnotations ? <ChartAnnotationLayer annotations={resolvedAnnotations} context={context} /> : null}\n            </div>\n          </div>\n        </foreignObject>\n      </svg>\n    </div>\n  );\n};\n\nAnnotationOnlyChart.displayName = 'AnnotationOnlyChart';\n"],"names":["React","ChartAnnotationLayer","toImage","exportToImage","useRtl","useAnnotationOnlyChartStyles","DEFAULT_HEIGHT","FALLBACK_WIDTH","buildPadding","margin","undefined","top","t","right","r","bottom","b","left","l","AnnotationOnlyChart","props","annotations","chartTitle","description","width","height","paperBackgroundColor","plotBackgroundColor","fontColor","fontFamily","componentRef","isRtl","classes","containerRef","useRef","contentRef","measuredWidth","setMeasuredWidth","useState","contentHeight","setContentHeight","useEffect","node","current","ResizeObserver","rect","getBoundingClientRect","prev","observer","entries","entry","newWidth","contentRect","Math","abs","observe","disconnect","resolvedWidth","max","resolvedHeight","newHeight","svgHeight","ceil","context","plotRect","x","y","svgRect","padding","rootStyle","useMemo","minHeight","backgroundColor","color","contentStyle","resolvedAnnotations","hasAnnotations","length","ariaLabel","useImperativeHandle","chartHandle","chartContainer","opts","Promise","reject","Error","div","ref","data-chart-annotation-container","svg","viewBox","style","display","role","aria-label","foreignObject","className","root","data-chart-annotation-only","span","title","aria-hidden","content","displayName"],"mappings":"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"}

package/lib/components/AnnotationOnlyChart/AnnotationOnlyChart.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

package/lib/components/AnnotationOnlyChart/AnnotationOnlyChart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AnnotationOnlyChart/AnnotationOnlyChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ChartAnnotation } from '../../types/ChartAnnotation';\nimport type { Chart } from '../../types/index';\nimport type { Margin } from '@fluentui/chart-utilities';\n\n/**\n * Props for the annotation-only chart renderer.\n */\nexport interface AnnotationOnlyChartProps {\n  /**\n   * Collection of annotations to render.\n   */\n  annotations: ChartAnnotation[];\n  /** Optional layout title extracted from the Plotly schema. */\n  chartTitle?: string;\n  /** Optional descriptive text for accessibility. */\n  description?: string;\n  /** Desired width in pixels (if absent the chart will grow to fit the container). */\n  width?: number;\n  /** Desired height in pixels. */\n  height?: number;\n  /** Paper/background colour specified in the Plotly layout. */\n  paperBackgroundColor?: string;\n  /** Plot area background colour specified in the Plotly layout. */\n  plotBackgroundColor?: string;\n  /** Global layout font colour. */\n  fontColor?: string;\n  /** Global layout font family. */\n  fontFamily?: string;\n  /** Layout margin converted to padding for the outer wrapper. */\n  margin?: Partial<Margin>;\n  /** Component ref propagated by the DeclarativeChart surface. */\n  componentRef?: React.RefObject<Chart>;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/AnnotationOnlyChart/index.js

@@ -0,0 +1,2 @@
+export * from './AnnotationOnlyChart';
+export * from './AnnotationOnlyChart.types';

package/lib/components/AnnotationOnlyChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AnnotationOnlyChart/index.ts"],"sourcesContent":["export * from './AnnotationOnlyChart';\nexport * from './AnnotationOnlyChart.types';\n"],"names":[],"mappings":"AAAA,cAAc,wBAAwB;AACtC,cAAc,8BAA8B"}