@fluentui/react-charts 0.0.0-nightly-20260109-0406.1 → 0.0.0-nightly-20260113-0406.1

package/CHANGELOG.md

@@ -1,26 +1,26 @@
 # Change Log - @fluentui/react-charts
 
-This log was last generated on Fri, 09 Jan 2026 04:21:33 GMT and should not be manually modified.
+This log was last generated on Tue, 13 Jan 2026 04:21:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20260109-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v0.0.0-nightly-20260109-0406.1)
+## [0.0.0-nightly-20260113-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v0.0.0-nightly-20260113-0406.1)
 
-Fri, 09 Jan 2026 04:21:33 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.8..@fluentui/react-charts_v0.0.0-nightly-20260109-0406.1)
+Tue, 13 Jan 2026 04:21:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.8..@fluentui/react-charts_v0.0.0-nightly-20260113-0406.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-button to v0.0.0-nightly-20260109-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/6b02cd49b3424ef75f31d84a4046598222f63e65) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20260109-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/6b02cd49b3424ef75f31d84a4046598222f63e65) by beachball)
-- Bump @fluentui/react-overflow to v0.0.0-nightly-20260109-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/6b02cd49b3424ef75f31d84a4046598222f63e65) by beachball)
-- Bump @fluentui/react-popover to v0.0.0-nightly-20260109-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/6b02cd49b3424ef75f31d84a4046598222f63e65) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20260109-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/6b02cd49b3424ef75f31d84a4046598222f63e65) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20260109-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/6b02cd49b3424ef75f31d84a4046598222f63e65) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20260109-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/6b02cd49b3424ef75f31d84a4046598222f63e65) by beachball)
-- Bump @fluentui/react-tooltip to v0.0.0-nightly-20260109-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/6b02cd49b3424ef75f31d84a4046598222f63e65) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20260109-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/6b02cd49b3424ef75f31d84a4046598222f63e65) by beachball)
+- Bump @fluentui/react-button to v0.0.0-nightly-20260113-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b3ee65b30567b6bd25ced8c45d631a56377d08ee) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20260113-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b3ee65b30567b6bd25ced8c45d631a56377d08ee) by beachball)
+- Bump @fluentui/react-overflow to v0.0.0-nightly-20260113-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b3ee65b30567b6bd25ced8c45d631a56377d08ee) by beachball)
+- Bump @fluentui/react-popover to v0.0.0-nightly-20260113-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b3ee65b30567b6bd25ced8c45d631a56377d08ee) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20260113-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b3ee65b30567b6bd25ced8c45d631a56377d08ee) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20260113-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b3ee65b30567b6bd25ced8c45d631a56377d08ee) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20260113-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b3ee65b30567b6bd25ced8c45d631a56377d08ee) by beachball)
+- Bump @fluentui/react-tooltip to v0.0.0-nightly-20260113-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b3ee65b30567b6bd25ced8c45d631a56377d08ee) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20260113-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/b3ee65b30567b6bd25ced8c45d631a56377d08ee) by beachball)
 
 ## [9.3.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.8)
 

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { CurveFactory } from 'd3-shape';
+import type { Font } from '@fluentui/chart-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import type { Margin } from '@fluentui/chart-utilities';
 import { PositioningShorthand } from '@fluentui/react-positioning';
@@ -152,6 +153,24 @@ export declare interface AreaChartStyleProps extends CartesianChartStyleProps {
 export declare interface AreaChartStyles extends CartesianChartStyles {
 }
 
+/**
+ * Represents a areapolar series.
+ */
+export declare interface AreaPolarSeries extends DataSeries {
+    /**
+     * Type discriminator: always 'areapolar' for this series.
+     */
+    type: 'areapolar';
+    /**
+     * Array of data points for the series.
+     */
+    data: PolarDataPoint[];
+    /**
+     * Additional line rendering options (e.g., stroke width, curve type).
+     */
+    lineOptions?: LineChartLineOptions;
+}
+
 /**
  * Specifies the ordering options for axis categories in Cartesian charts.
  *
@@ -322,6 +341,10 @@ export declare const CartesianChart: React_2.FunctionComponent<ModifiedCartesian
  * {@docCategory CartesianChart}
  */
 export declare interface CartesianChartProps {
+    /**
+     * Title styles configuration for the chart title
+     */
+    titleStyles?: TitleStyles;
     /**
      * Below height used for resizing of the chart
      * Wrap chart in your container and send the updated height and width to these props.
@@ -860,6 +883,11 @@ export declare interface ChartAnnotationLayerProps {
     annotations?: ChartAnnotation[];
     context: ChartAnnotationContext;
     className?: string;
+    /**
+     * When true, removes default border, shadow, and background styling from annotations.
+     * @default false
+     */
+    hideDefaultStyles?: boolean;
 }
 
 export declare interface ChartAnnotationLayoutProps {
@@ -1046,6 +1074,10 @@ export declare const ChartTable: React_2.FunctionComponent<ChartTableProps>;
  * {@docCategory ChartTable}
  */
 export declare interface ChartTableProps {
+    /**
+     * Title styles configuration for the chart title
+     */
+    titleStyles?: TitleStyles;
     /**
      * 1d or 2d Array of header values.
      */
@@ -1070,6 +1102,10 @@ export declare interface ChartTableProps {
      * @default '650px'
      */
     height?: string | number;
+    /**
+     * Chart title to display above the table
+     */
+    chartTitle?: string;
     /**
      * Additional class name(s) to apply to the table chart
      */
@@ -1095,6 +1131,8 @@ export declare interface ChartTableStyles {
     headerCell?: string;
     bodyCell?: string;
     chart?: string;
+    chartTitle?: string;
+    svgTooltip?: string;
 }
 
 declare enum ChartTypes {
@@ -1369,6 +1407,10 @@ export declare const DonutChart: React_2.FunctionComponent<DonutChartProps>;
  * {@docCategory DonutChart}
  */
 export declare interface DonutChartProps extends CartesianChartProps {
+    /**
+     * Title styles configuration for the chart title
+     */
+    titleStyles?: TitleStyles;
     /**
      * Data to render in the chart.
      */
@@ -1489,6 +1531,10 @@ export declare interface DonutChartStyles {
      * Style for the legend container.
      */
     legendContainer: string;
+    /**
+     * Style for the chart title.
+     */
+    chartTitle?: string;
     /**
      * styles for axis annotation
      */
@@ -1497,6 +1543,10 @@ export declare interface DonutChartStyles {
      * Styles for the chart wrapper div
      */
     chartWrapper?: string;
+    /**
+     * Style for SVG tooltip text
+     */
+    svgTooltip?: string;
 }
 
 export declare interface DPointType {
@@ -1566,6 +1616,10 @@ export declare interface FunnelChartDataPoint {
  * {@docCategory FunnelChart}
  */
 export declare interface FunnelChartProps {
+    /**
+     * Title styles configuration for the chart title
+     */
+    titleStyles?: TitleStyles;
     /**
      * Data points for the funnel chart
      */
@@ -1650,10 +1704,18 @@ export declare interface FunnelChartStyles {
      * Styles for the chart
      */
     chart?: string;
+    /**
+     * Style for the chart title.
+     */
+    chartTitle?: string;
     /**
      * Styles for text elements
      */
     text?: string;
+    /**
+     * Style for SVG tooltip text
+     */
+    svgTooltip?: string;
     /**
      * Styles for the callout root element
      */
@@ -1782,6 +1844,10 @@ export declare const GaugeChart: React_2.FunctionComponent<GaugeChartProps>;
  * {@docCategory GaugeChart}
  */
 export declare interface GaugeChartProps {
+    /**
+     * Title styles configuration for the chart title
+     */
+    titleStyles?: TitleStyles;
     /**
      * Width of the chart
      */
@@ -3308,6 +3374,24 @@ export declare interface LineDataInVerticalStackedBarChart {
     lineOptions?: LineChartLineOptions;
 }
 
+/**
+ * Represents a linepolar series.
+ */
+export declare interface LinePolarSeries extends DataSeries {
+    /**
+     * Type discriminator: always 'linepolar' for this series.
+     */
+    type: 'linepolar';
+    /**
+     * Array of data points for the series.
+     */
+    data: PolarDataPoint[];
+    /**
+     * Additional line rendering options (e.g., stroke width, curve type).
+     */
+    lineOptions?: LineChartLineOptions;
+}
+
 /**
  * Represents a line series.
  */
@@ -3524,6 +3608,223 @@ declare enum Points {
     octagon = 7
 }
 
+/**
+ * Configuration options for a polar axis.
+ * {@docCategory PolarChart}
+ */
+export declare type PolarAxisProps = AxisProps & {
+    /**
+     * Values at which ticks should be placed on the axis.
+     */
+    tickValues?: number[] | Date[] | string[];
+    /**
+     * Format string for the axis ticks.
+     * For numbers, see: https://d3js.org/d3-format.
+     * And for dates see: https://d3js.org/d3-time-format.
+     */
+    tickFormat?: string;
+    /**
+     * Number of ticks to display on the axis.
+     */
+    tickCount?: number;
+    /**
+     * Defines the order of categories on the axis.
+     * @default 'default'
+     */
+    categoryOrder?: AxisCategoryOrder;
+    /**
+     * Scale type for the axis.
+     * @default 'default'
+     */
+    scaleType?: AxisScaleType;
+    /**
+     * Start value of the axis range.
+     */
+    rangeStart?: number | Date;
+    /**
+     * End value of the axis range.
+     */
+    rangeEnd?: number | Date;
+};
+
+export declare const PolarChart: React_2.FunctionComponent<PolarChartProps>;
+
+/**
+ * Polar Chart properties
+ * {@docCategory PolarChart}
+ */
+export declare interface PolarChartProps {
+    /**
+     * Data series to be rendered in the polar chart.
+     */
+    data: (AreaPolarSeries | LinePolarSeries | ScatterPolarSeries)[];
+    /**
+     * Width of the polar chart.
+     * @default 200
+     */
+    width?: number;
+    /**
+     * Height of the polar chart.
+     * @default 200
+     */
+    height?: number;
+    /**
+     * Margins around the chart area.
+     */
+    margins?: Margins;
+    /**
+     * If true, hides the legend.
+     * @default false
+     */
+    hideLegend?: boolean;
+    /**
+     * If true, hides the tooltip.
+     * @default false
+     */
+    hideTooltip?: boolean;
+    legendProps?: Partial<LegendsProps>;
+    /**
+     * Style properties for the polar chart.
+     */
+    styles?: PolarChartStyles;
+    /**
+     * Title of the chart.
+     */
+    chartTitle?: string;
+    /**
+     * Fraction of the radius to cut out from the center of the chart.
+     * Accepts values in the range [0, 1].
+     */
+    hole?: number;
+    /**
+     * Shape of the polar chart.
+     * @default 'circle'
+     */
+    shape?: 'circle' | 'polygon';
+    /**
+     * Direction in which the chart is drawn.
+     * @default 'counterclockwise'
+     */
+    direction?: 'clockwise' | 'counterclockwise';
+    /**
+     * Configuration options for the radial axis.
+     */
+    radialAxis?: PolarAxisProps;
+    /**
+     * Configuration options for the angular axis.
+     */
+    angularAxis?: PolarAxisProps & {
+        /**
+         * Format unit for angular values.
+         * @default 'degrees'
+         */
+        unit?: 'radians' | 'degrees';
+    };
+    /**
+     * 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.Ref<Chart>;
+    /**
+     * Locale identifier string used to format numbers and dates according to the specified culture.
+     * Example: 'en-US', 'fr-FR'.
+     */
+    culture?: string;
+    /**
+     * Options for localizing date values.
+     */
+    dateLocalizeOptions?: Intl.DateTimeFormatOptions;
+    /**
+     * If true, date values are treated as UTC dates.
+     * @default false
+     */
+    useUTC?: boolean;
+}
+
+/**
+ * Polar Chart style properties
+ * {@docCategory PolarChart}
+ */
+export declare interface PolarChartStyleProps {
+}
+
+/**
+ * Polar Chart styles
+ * {@docCategory PolarChart}
+ */
+export declare interface PolarChartStyles {
+    /**
+     * Style for the root element.
+     */
+    root?: string;
+    /**
+     * Style for the chart wrapper element.
+     */
+    chartWrapper?: string;
+    /**
+     * Style for the chart element.
+     */
+    chart?: string;
+    /**
+     * Style for the inner grid lines.
+     */
+    gridLineInner?: string;
+    /**
+     * Style for the outer grid lines.
+     */
+    gridLineOuter?: string;
+    /**
+     * Style for the tick labels.
+     */
+    tickLabel?: string;
+    /**
+     * Style for the legend container.
+     */
+    legendContainer?: string;
+}
+
+/**
+ * Represents a single data point in a polar series.
+ */
+export declare interface PolarDataPoint {
+    /**
+     * Radial value of the data point.
+     */
+    r: string | number | Date;
+    /**
+     * Angular value of the data point, specified as a category or in degrees.
+     */
+    theta: string | number;
+    /**
+     * Optional click handler for the data point.
+     */
+    onClick?: () => void;
+    /**
+     * Custom text to show in the callout in place of the radial axis value.
+     */
+    radialAxisCalloutData?: string;
+    /**
+     * Custom text to show in the callout in place of the angular axis value.
+     */
+    angularAxisCalloutData?: string;
+    /**
+     * Accessibility properties for the data point.
+     */
+    callOutAccessibilityData?: AccessibilityProps;
+    /**
+     * Custom marker size for the data point.
+     */
+    markerSize?: number;
+    /**
+     * Optional text to annotate or label the data point.
+     */
+    text?: string;
+    /**
+     * Color of the data point. If not provided, it will inherit the series color.
+     */
+    color?: string;
+}
+
 export declare interface PopoverComponentStyles {
     calloutContentRoot: string;
     calloutDateTimeContainer: string;
@@ -3671,6 +3972,10 @@ export declare interface SankeyChartData {
  * {@docCategory SankeyChart}
  */
 export declare interface SankeyChartProps {
+    /**
+     * Title styles configuration for the chart title
+     */
+    titleStyles?: TitleStyles;
     /**
      * Data to render in the chart.
      */
@@ -3741,6 +4046,11 @@ export declare interface SankeyChartProps {
      * The prop used to define the culture to localize the numbers and date
      */
     culture?: string;
+    /**
+     * Whether to hide the legend
+     * @default false
+     */
+    hideLegend?: boolean;
     /**
      * Props related to reflow behavior of the chart
      */
@@ -3798,6 +4108,14 @@ export declare interface SankeyChartStyles {
      * Styles for the chart svg element
      */
     chart?: string;
+    /**
+     * Style for SVG tooltip text
+     */
+    svgTooltip?: string;
+    /**
+     * Style for the chart title.
+     */
+    chartTitle?: string;
 }
 
 declare type SankeyLayoutGenerator = SankeyLayout<SankeyGraph<{}, {}>, {}, {}>;
@@ -3924,6 +4242,20 @@ export declare interface ScatterChartStyles extends CartesianChartStyles {
     markerLabel?: string;
 }
 
+/**
+ * Represents a scatterpolar series.
+ */
+export declare interface ScatterPolarSeries extends DataSeries {
+    /**
+     * Type discriminator: always 'scatterpolar' for this series.
+     */
+    type: 'scatterpolar';
+    /**
+     * Array of data points for the series.
+     */
+    data: PolarDataPoint[];
+}
+
 /**
  * DeclarativeChart schema.
  * {@docCategory DeclarativeChart}
@@ -4056,6 +4388,35 @@ declare interface TextboxProps {
     fill?: string;
 }
 
+/**
+ * Shared interface for chart title styling properties.
+ * Used by components that display a chart title with customizable font, alignment, and padding.
+ * {@docCategory TitleStyles}
+ */
+declare interface TitleStyles {
+    /**
+     * Font configuration for the title
+     */
+    titleFont?: Partial<Font>;
+    /**
+     * Horizontal anchor/alignment for the chart title
+     */
+    titleXAnchor?: 'auto' | 'left' | 'center' | 'right';
+    /**
+     * Vertical anchor/alignment for the chart title
+     */
+    titleYAnchor?: 'auto' | 'top' | 'middle' | 'bottom';
+    /**
+     * Padding for the chart title
+     */
+    titlePad?: {
+        t?: number;
+        r?: number;
+        b?: number;
+        l?: number;
+    };
+}
+
 /**
  * VerticalBarchart component
  * {@docCategory VerticalBarChart}

package/lib/PolarChart.js

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

package/lib/PolarChart.js.map

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

package/lib/components/AnnotationOnlyChart/AnnotationOnlyChart.js

@@ -188,7 +188,8 @@ export const AnnotationOnlyChart = (props)=>{
         role: "presentation"
     }, hasAnnotations ? /*#__PURE__*/ React.createElement(ChartAnnotationLayer, {
         annotations: resolvedAnnotations,
-        context: context
+        context: context,
+        hideDefaultStyles: true
     }) : null)))));
 };
 AnnotationOnlyChart.displayName = 'AnnotationOnlyChart';

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 { 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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"}
+{"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 ? (\n                <ChartAnnotationLayer annotations={resolvedAnnotations} context={context} hideDefaultStyles={true} />\n              ) : 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","hideDefaultStyles","displayName"],"mappings":"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"}

package/lib/components/ChartTable/ChartTable.js

@@ -5,6 +5,7 @@ import { tokens } from '@fluentui/react-theme';
 import * as d3 from 'd3-color';
 import { getColorContrast } from '../../utilities/colors';
 import { resolveCSSVariables } from '../../utilities/utilities';
+import { ChartTitle } from '../../utilities/index';
 import { useImageExport } from '../../utilities/hooks';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 function invertHexColor(hex) {
@@ -37,7 +38,7 @@ function getSafeBackgroundColor(chartContainer, foreground, background) {
     return invertedContrast >= 3 ? invertedBg : fallbackBg;
 }
 export const ChartTable = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
-    const { headers, rows, width, height } = props;
+    const { headers, rows, width, height, chartTitle } = props;
     const { chartContainerRef: _rootElem } = useImageExport(props.componentRef, true, false);
     const classes = useChartTableStyles(props);
     const arrowAttributes = useArrowNavigationGroup({
@@ -78,23 +79,36 @@ export const ChartTable = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>
             }
         }
     }
+    const titleHeight = chartTitle ? 30 : 0;
+    const totalHeight = typeof height === 'number' ? height : 650;
+    const tableHeight = `${totalHeight - titleHeight}px`;
+    const svgWidth = typeof width === 'number' ? width : '100%';
+    const titleMaxWidth = typeof width === 'number' ? width - 20 : undefined;
+    const titleX = typeof width === 'number' ? width / 2 : 0;
     return /*#__PURE__*/ React.createElement("div", {
         ref: (el)=>{
             _rootElem.current = el;
         },
         className: classes.root,
         style: {
-            height: height ? `${height}px` : '650px',
+            height: `${totalHeight}px`,
             overflow: 'hidden'
         }
     }, /*#__PURE__*/ React.createElement("svg", {
-        width: width !== null && width !== void 0 ? width : '100%',
-        height: height !== null && height !== void 0 ? height : '650px'
-    }, /*#__PURE__*/ React.createElement("foreignObject", {
+        width: svgWidth,
+        height: `${totalHeight}px`
+    }, chartTitle && /*#__PURE__*/ React.createElement(ChartTitle, {
+        title: chartTitle,
+        x: titleX,
+        maxWidth: titleMaxWidth,
+        className: classes.chartTitle,
+        titleStyles: props.titleStyles,
+        tooltipClassName: classes.svgTooltip
+    }), /*#__PURE__*/ React.createElement("foreignObject", {
         x: "0",
-        y: "0",
+        y: titleHeight,
         width: "100%",
-        height: "100%"
+        height: tableHeight
     }, /*#__PURE__*/ React.createElement("div", {
         style: {
             maxHeight: height ? `${height}px` : '650px',