@fluentui/react-charts 9.3.5 → 9.3.7

package/CHANGELOG.md

@@ -1,12 +1,52 @@
 # 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 Fri, 05 Dec 2025 22:36:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.7)
+
+Fri, 05 Dec 2025 22:36:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.6..@fluentui/react-charts_v9.3.7)
+
+### Patches
+
+- fix: handle frequent uncaught exceptions ([PR #35495](https://github.com/microsoft/fluentui/pull/35495) by kumarkshitij@microsoft.com)
+- remove redundant styles ([PR #35476](https://github.com/microsoft/fluentui/pull/35476) by anushgupta@microsoft.com)
+- fix incomplete donut and VSBC bug ([PR #35484](https://github.com/microsoft/fluentui/pull/35484) by anushgupta@microsoft.com)
+- fix width and height props not being applied to SVG path dimensions ([PR #35479](https://github.com/microsoft/fluentui/pull/35479) by 120502241+jepagan_microsoft@users.noreply.github.com)
+- add support for x rounded tick values  ([PR #35490](https://github.com/microsoft/fluentui/pull/35490) by anushgupta@microsoft.com)
+- fix popover issue ([PR #35501](https://github.com/microsoft/fluentui/pull/35501) by anushgupta@microsoft.com)
+- set reference line legends after the main chart legends ([PR #35481](https://github.com/microsoft/fluentui/pull/35481) by anushgupta@microsoft.com)
+- fix duplicate points issue in scatter polar chart ([PR #35516](https://github.com/microsoft/fluentui/pull/35516) by anushgupta@microsoft.com)
+- feat: enable multiplot image export ([PR #35483](https://github.com/microsoft/fluentui/pull/35483) by kumarkshitij@microsoft.com)
+- fix(react-charts): Ensuring annotation keeps tied with chart always ([PR #35486](https://github.com/microsoft/fluentui/pull/35486) by 120183316+srmukher@users.noreply.github.com)
+- Bump @fluentui/react-button to v9.7.0 ([PR #35537](https://github.com/microsoft/fluentui/pull/35537) by beachball)
+
+## [9.3.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.6)
+
+Tue, 11 Nov 2025 19:18:18 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,8 +1,9 @@
 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';
+import { Ref } from 'react';
 import { SankeyGraph } from 'd3-sankey';
 import { SankeyLayout } from 'd3-sankey';
 import { SankeyLink } from 'd3-sankey';
@@ -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.Ref<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>;
@@ -358,7 +403,11 @@ export declare interface CartesianChartProps {
      */
     yMaxValue?: number;
     /**
-     * maximum data value point in x-axis
+     * minimum data value point in x-axis (for numeric x-axis)
+     */
+    xMinValue?: number;
+    /**
+     * maximum data value point in x-axis (for numeric x-axis)
      */
     xMaxValue?: number;
     /**
@@ -378,6 +427,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
@@ -497,7 +550,7 @@ export declare interface CartesianChartProps {
      * Optional callback to access the Chart interface. Use this instead of ref for accessing
      * the public methods and properties of the component.
      */
-    componentRef?: React_2.RefObject<Chart | null>;
+    componentRef?: React_2.Ref<Chart>;
     /**
      * Prop to set the x axis annotation. Used to display additional information on the x-axis.
      * This is shown on the top of the chart.
@@ -550,6 +603,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 +719,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 +745,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
@@ -847,7 +1052,7 @@ export declare interface ChartTableProps {
      * Optional callback to access the Chart interface. Use this instead of ref for accessing
      * the public methods and properties of the component.
      */
-    componentRef?: React_2.RefObject<Chart>;
+    componentRef?: React_2.Ref<Chart>;
 }
 
 /**
@@ -904,6 +1109,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.
@@ -1100,7 +1317,7 @@ export declare interface DeclarativeChartProps extends React_2.RefAttributes<HTM
      * Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing
      * the public methods and properties of the component.
      */
-    componentRef?: React_2.RefObject<IDeclarativeChart | null>;
+    componentRef?: React_2.Ref<IDeclarativeChart>;
     /**
      * Optional prop to specify the colorway type of the chart.
      * - 'default': Use Fluent UI color palette aligning with plotly colorway.
@@ -1203,7 +1420,7 @@ export declare interface DonutChartProps extends CartesianChartProps {
      * Optional callback to access the Chart interface. Use this instead of ref for accessing
      * the public methods and properties of the component.
      */
-    componentRef?: React_2.RefObject<Chart>;
+    componentRef?: React_2.Ref<Chart>;
     /**
      * Prop to enable the round corners in the chart
      * @default false
@@ -1359,7 +1576,7 @@ export declare interface FunnelChartProps {
     /**
      * Reference to the chart component
      */
-    componentRef?: React_2.RefObject<any>;
+    componentRef?: React_2.Ref<Chart>;
     /**
      * Additional CSS class(es) to apply to the chart
      */
@@ -1497,17 +1714,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
@@ -1631,7 +1837,7 @@ export declare interface GaugeChartProps {
      * Optional callback to access the Chart interface. Use this instead of ref for accessing
      * the public methods and properties of the component.
      */
-    componentRef?: React.RefObject<Chart>;
+    componentRef?: React.Ref<Chart>;
 }
 
 /**
@@ -2102,19 +2308,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 +2581,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 +2668,7 @@ export declare interface HorizontalDataPoint {
 
 declare interface IAxisData {
     yAxisDomainValues: number[];
+    yAxisTickText: string[];
 }
 
 /**
@@ -2604,7 +2793,7 @@ export declare interface Legend {
  */
 export declare interface LegendContainer {
     toSVG: (svgWidth: number, isRTL?: boolean) => {
-        node: SVGGElement | null;
+        node: SVGSVGElement | null;
         width: number;
         height: number;
     };
@@ -2737,7 +2926,7 @@ export declare interface LegendsProps {
     /**
      * Callback to access the public methods and properties of the component.
      */
-    legendRef?: React_2.RefObject<LegendContainer | null>;
+    legendRef?: React_2.Ref<LegendContainer>;
 }
 
 /**
@@ -3257,11 +3446,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 +3515,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}
@@ -3489,7 +3685,7 @@ export declare interface SankeyChartProps {
      * Optional callback to access the Chart interface. Use this instead of ref for accessing
      * the public methods and properties of the component.
      */
-    componentRef?: RefObject<Chart>;
+    componentRef?: Ref<Chart>;
     /**
      * props for the callout in the chart
      */
@@ -3657,10 +3853,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;
 }
 
 /**
@@ -3718,6 +3910,7 @@ declare interface SLinkExtra {
      */
     value: number;
     unnormalizedValue?: number;
+    color?: string;
 }
 
 export declare type SNode = SankeyNode<SNodeExtra, SLinkExtra>;
@@ -4107,15 +4300,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"}