@fluentui/react-charts 9.3.6 → 9.3.8

package/CHANGELOG.md

@@ -1,12 +1,56 @@
 # Change Log - @fluentui/react-charts
 
-This log was last generated on Tue, 11 Nov 2025 19:13:26 GMT and should not be manually modified.
+This log was last generated on Wed, 17 Dec 2025 18:05:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.8)
+
+Wed, 17 Dec 2025 18:05:59 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.7..@fluentui/react-charts_v9.3.8)
+
+### Patches
+
+- fix(react-charts): Mixed coordinate annotations ([PR #35532](https://github.com/microsoft/fluentui/pull/35532) by 120183316+srmukher@users.noreply.github.com)
+- add missing aria-labels in v9 cartesian charts ([PR #35560](https://github.com/microsoft/fluentui/pull/35560) by 74965306+Anush2303@users.noreply.github.com)
+- fix label percentage issue in donut, VBC, VSBC and heatmap chart ([PR #35538](https://github.com/microsoft/fluentui/pull/35538) by anushgupta@microsoft.com)
+- fix a11y bugs in line chart ([PR #35550](https://github.com/microsoft/fluentui/pull/35550) by anushgupta@microsoft.com)
+- fix a11y issues ([PR #35573](https://github.com/microsoft/fluentui/pull/35573) by anushgupta@microsoft.com)
+- feat: improve x-axis tick label layout with automatic wrapping, truncation, or multi-level rendering based on available space ([PR #35522](https://github.com/microsoft/fluentui/pull/35522) by kumarkshitij@microsoft.com)
+- fix: resolve minor gantt chart bugs ([PR #35543](https://github.com/microsoft/fluentui/pull/35543) by kumarkshitij@microsoft.com)
+- fix(react-charts):Fixing annotations opacity issue ([PR #35564](https://github.com/microsoft/fluentui/pull/35564) by 120183316+srmukher@users.noreply.github.com)
+- enable custom callout in scatter chart ([PR #35565](https://github.com/microsoft/fluentui/pull/35565) by anushgupta@microsoft.com)
+- fix double padding issue in scatter chart ([PR #35498](https://github.com/microsoft/fluentui/pull/35498) by anushgupta@microsoft.com)
+- Bump @fluentui/react-button to v9.7.1 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.3.4 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
+- Bump @fluentui/react-overflow to v9.6.6 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
+- Bump @fluentui/react-popover to v9.12.13 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
+- Bump @fluentui/react-tabster to v9.26.11 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
+- Bump @fluentui/react-tooltip to v9.8.12 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
+- Bump @fluentui/react-utilities to v9.26.0 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
+
+## [9.3.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.7)
+
+Fri, 05 Dec 2025 22:38:46 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:13:26 GMT 
+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

package/dist/index.d.ts

@@ -3,7 +3,7 @@ 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';
@@ -67,7 +67,7 @@ export declare interface AnnotationOnlyChartProps {
     /** Layout margin converted to padding for the outer wrapper. */
     margin?: Partial<Margin>;
     /** Component ref propagated by the DeclarativeChart surface. */
-    componentRef?: React_2.RefObject<Chart>;
+    componentRef?: React_2.Ref<Chart>;
 }
 
 export declare interface AnnotationPlotRect {
@@ -402,6 +402,10 @@ export declare interface CartesianChartProps {
      * maximum data value point in y-axis
      */
     yMaxValue?: number;
+    /**
+     * minimum data value point in x-axis (for numeric x-axis)
+     */
+    xMinValue?: number;
     /**
      * maximum data value point in x-axis
      */
@@ -546,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.
@@ -593,7 +597,17 @@ export declare interface CartesianChartProps {
      * Configuration for the x-axis.
      * Use this to control `tickStep`, `tick0`, etc.
      */
-    xAxis?: AxisProps;
+    xAxis?: AxisProps & {
+        /**
+         * Controls how x-axis tick labels are laid out.
+         *
+         * - `'auto'`: Tick labels are automatically wrapped, truncated, and staggered
+         *   across alternating levels based on the available space to prevent overlap.
+         *
+         * @default 'default'
+         */
+        tickLayout?: 'default' | 'auto';
+    };
     /**
      * Configuration for the y-axis.
      * Use this to control `tickStep`, `tick0`, etc.
@@ -805,17 +819,37 @@ export declare interface ChartAnnotationContext {
 }
 
 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';
+    /** Cartesian data coordinates mapped through the chart scales */
+    type: 'data';
     /** 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';
+} | {
+    /** Normalised coordinates within the plot area (0-1) */
+    type: 'relative';
+    /** Fractional x-position inside the plot area */
+    x: number;
+    /** Fractional y-position inside the plot area */
+    y: number;
+} | {
+    /** Absolute pixel position relative to the chart's plot origin */
+    type: 'pixel';
+    /** Horizontal pixel offset from the plot origin */
+    x: number;
+    /** Vertical pixel offset from the plot origin */
+    y: number;
+} | {
+    /** Mixed coordinate systems per axis (e.g., data X + relative Y) */
+    type: 'mixed';
+    xCoordinateType: 'data' | 'relative' | 'pixel';
+    yCoordinateType: 'data' | 'relative' | 'pixel';
+    x: number | string | Date;
+    y: number | string | Date;
+    /** Use the secondary y scale when the Y coordinate maps to data */
+    yAxis?: 'primary' | 'secondary';
 };
 
 export declare type ChartAnnotationHorizontalAlign = 'start' | 'center' | 'end';
@@ -1048,7 +1082,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>;
 }
 
 /**
@@ -1313,7 +1347,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.
@@ -1416,7 +1450,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
@@ -1572,7 +1606,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
      */
@@ -1833,7 +1867,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>;
 }
 
 /**
@@ -2142,6 +2176,10 @@ export declare interface GVBarChartSeriesPoint {
      * False by default.
      */
     useSecondaryYScale?: boolean;
+    /**
+     * Label to display on the bar
+     */
+    barLabel?: string;
 }
 
 export declare interface GVDataPoint {
@@ -2789,7 +2827,7 @@ export declare interface Legend {
  */
 export declare interface LegendContainer {
     toSVG: (svgWidth: number, isRTL?: boolean) => {
-        node: SVGGElement | null;
+        node: SVGSVGElement | null;
         width: number;
         height: number;
     };
@@ -2922,7 +2960,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>;
 }
 
 /**
@@ -3681,7 +3719,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
      */
@@ -3841,6 +3879,10 @@ export declare interface ScatterChartProps extends CartesianChartProps {
      * Define a custom callout renderer for a data point
      */
     onRenderCalloutPerDataPoint?: RenderFunction<CustomizedCalloutData>;
+    /**
+     * Define a custom callout renderer for a stack; default is to render per data point
+     */
+    onRenderCalloutPerStack?: RenderFunction<CustomizedCalloutData>;
     /**
      * Callback for getting callout description message
      */
@@ -3906,6 +3948,7 @@ declare interface SLinkExtra {
      */
     value: number;
     unnormalizedValue?: number;
+    color?: string;
 }
 
 export declare type SNode = SankeyNode<SNodeExtra, SLinkExtra>;
@@ -4050,6 +4093,11 @@ export declare interface VerticalBarChartDataPoint {
      * Accessibility data for callout
      */
     callOutAccessibilityData?: AccessibilityProps;
+    /**
+     * Label to display on the bar
+     * This is an optional prop that can be used to show custom text on bars
+     */
+    barLabel?: string;
 }
 
 /**
@@ -4393,6 +4441,11 @@ export declare interface VSChartDataPoint {
      * The prop used to define the culture to localized the numbers
      */
     culture?: string;
+    /**
+     * Label to display on the bar
+     * This is an optional prop that can be used to show custom text on bars
+     */
+    barLabel?: string;
 }
 
 /**

package/lib/components/AnnotationOnlyChart/AnnotationOnlyChart.js

@@ -1,9 +1,9 @@
 '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';
+import { useImageExport } from '../../utilities/hooks';
 const DEFAULT_HEIGHT = 650;
 const FALLBACK_WIDTH = 400;
 const buildPadding = (margin)=>{
@@ -27,7 +27,7 @@ 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 { chartContainerRef: containerRef } = useImageExport(componentRef, true, false);
     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);
@@ -154,20 +154,6 @@ export const AnnotationOnlyChart = (props)=>{
     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"

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

@@ -1 +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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"}
+{"version":3,"sources":["../src/components/AnnotationOnlyChart/AnnotationOnlyChart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChartAnnotationLayer } from '../CommonComponents/Annotations/ChartAnnotationLayer';\nimport { useRtl } from '../../utilities';\nimport { useAnnotationOnlyChartStyles } from './useAnnotationOnlyChartStyles.styles';\nimport type { AnnotationOnlyChartProps } from './AnnotationOnlyChart.types';\nimport type { ChartAnnotationContext } from '../CommonComponents/Annotations/ChartAnnotationLayer.types';\nimport { useImageExport } from '../../utilities/hooks';\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 { chartContainerRef: containerRef } = useImageExport(componentRef, true, false);\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  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","useRtl","useAnnotationOnlyChartStyles","useImageExport","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","chartContainerRef","containerRef","contentRef","useRef","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","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.map

@@ -1 +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"}
+{"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.Ref<Chart>;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/AreaChart/AreaChart.js

@@ -1,17 +1,15 @@
 'use client';
 import * as React from 'react';
-import { useAreaChartStyles } from './useAreaChartStyles.styles';
 import { max as d3Max, bisector } from 'd3-array';
 import { pointer } from 'd3-selection';
-import { select as d3Select } from 'd3-selection';
 import { tokens } from '@fluentui/react-theme';
 import { area as d3Area, stack as d3Stack, curveMonotoneX as d3CurveBasis, line as d3Line } from 'd3-shape';
 import { CartesianChart } from '../../index';
-import { calloutData, getXAxisType, ChartTypes, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, getNextColor, getColorFromToken, getSecureProps, areArraysEqual, getCurveFactory, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfNumericForAreaLineScatterCharts, domainRangeOfDateForAreaLineScatterVerticalBarCharts, createStringYAxis, useRtl, findCalloutPoints } from '../../utilities/index';
+import { calloutData, getXAxisType, ChartTypes, XAxisTypes, getTypeOfAxis, getNextColor, getColorFromToken, getSecureProps, areArraysEqual, getCurveFactory, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfNumericForAreaLineScatterCharts, domainRangeOfDateForAreaLineScatterVerticalBarCharts, createStringYAxis, findCalloutPoints } from '../../utilities/index';
 import { useId } from '@fluentui/react-utilities';
 import { Legends } from '../Legends/index';
-import { toImage } from '../../utilities/image-export-utils';
 import { formatDateToLocaleString } from '@fluentui/chart-utilities';
+import { useImageExport } from '../../utilities/hooks';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const bisect = bisector((d)=>d.x).left;
 var InterceptVisibility = /*#__PURE__*/ function(InterceptVisibility) {
@@ -26,7 +24,6 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     const _verticalLineId = useId('verticalLine_');
     const _circleId = useId('circle');
     const _rectId = useId('rectangle');
-    const _tooltipId = useId('AreaChartTooltipID');
     //enableComputationOptimization is used for optimized code to group data points by x value
     //from O(n^2) to O(n) using a map.
     const _enableComputationOptimization = true;
@@ -48,9 +45,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     let _xAxisRectScale;
     // determines if the given area chart has multiple stacked bar charts
     let _isMultiStackChart;
-    const cartesianChartRef = React.useRef(null);
-    const _legendsRef = React.useRef(null);
-    const _isRTL = useRtl();
+    const { cartesianChartRef, legendsRef: _legendsRef } = useImageExport(props.componentRef, props.hideLegend);
     const [selectedLegends, setSelectedLegends] = React.useState(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) || []);
     const [activeLegend, setActiveLegend] = React.useState(undefined);
     const [hoverXValue, setHoverXValue] = React.useState('');
@@ -83,18 +78,6 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     }, [
         props
     ]);
-    React.useImperativeHandle(props.componentRef, ()=>{
-        var _cartesianChartRef_current;
-        var _cartesianChartRef_current_chartContainer;
-        return {
-            chartContainer: (_cartesianChartRef_current_chartContainer = (_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer) !== null && _cartesianChartRef_current_chartContainer !== void 0 ? _cartesianChartRef_current_chartContainer : null,
-            toImage: (opts)=>{
-                var _cartesianChartRef_current, _legendsRef_current;
-                return toImage((_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer, (_legendsRef_current = _legendsRef.current) === null || _legendsRef_current === void 0 ? void 0 : _legendsRef_current.toSVG, _isRTL, opts);
-            }
-        };
-    }, []);
-    const classes = useAreaChartStyles(props);
     function _getMinMaxOfYAxis(points, yAxisType, useSecondaryYScale) {
         return findNumericMinMaxOfY(points, yAxisType, useSecondaryYScale);
     }
@@ -679,29 +662,6 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
             visibility: displayOfLine,
             ...getSecureProps(pointLineOptions)
         }));
-        // Removing un wanted tooltip div from DOM, when prop not provided.
-        if (!props.showXAxisLablesTooltip) {
-            try {
-                // eslint-disable-next-line @nx/workspace-no-restricted-globals
-                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
-            // eslint-disable-next-line no-empty
-            } catch (e) {}
-        }
-        // Used to display tooltip at x axis labels.
-        if (!props.wrapXAxisLables && props.showXAxisLablesTooltip) {
-            const xAxisElement = d3Select(xElement).call(xScale);
-            try {
-                // eslint-disable-next-line @nx/workspace-no-restricted-globals
-                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
-            // eslint-disable-next-line no-empty
-            } catch (e) {}
-            const tooltipProps = {
-                tooltipCls: classes.tooltip,
-                id: _tooltipId,
-                axis: xAxisElement
-            };
-            xAxisElement && tooltipOfAxislabels(tooltipProps);
-        }
         return graph;
     }
     function _getOnClickHandler(points, index, pointIndex) {