@fluentui/react-charting 5.25.5 → 5.25.6

package/CHANGELOG.json

@@ -2,7 +2,66 @@
   "name": "@fluentui/react-charting",
   "entries": [
     {
-      "date": "Mon, 05 Jan 2026 14:46:56 GMT",
+      "date": "Tue, 27 Jan 2026 05:17:08 GMT",
+      "tag": "@fluentui/react-charting_v5.25.6",
+      "version": "5.25.6",
+      "comments": {
+        "patch": [
+          {
+            "author": "anushgupta@microsoft.com",
+            "package": "@fluentui/react-charting",
+            "commit": "ac121640c52fc058f59c2ed650692489732596e7",
+            "comment": "support chart title from plotly schema"
+          },
+          {
+            "author": "120183316+srmukher@users.noreply.github.com",
+            "package": "@fluentui/react-charting",
+            "commit": "c39e1d30eea7f12a312ef89a43c4ef2fede411ca",
+            "comment": "feat(react-charting): Add prop to regulate removal of default annotation styling"
+          },
+          {
+            "author": "kumarkshitij@microsoft.com",
+            "package": "@fluentui/react-charting",
+            "commit": "182caa4ff028038c61d9e35979ab3e93a7cf0cd3",
+            "comment": "feat: improve x-axis tick label layout with automatic wrapping, truncation, or multi-level rendering based on available space"
+          },
+          {
+            "author": "kumarkshitij@microsoft.com",
+            "package": "@fluentui/react-charting",
+            "commit": "fb1285feb479f5821dc0fc1fc10485025730e6a1",
+            "comment": "feat: add PolarChart"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-charting",
+            "comment": "Bump @fluentui/react-focus to v8.10.4",
+            "commit": "ac121640c52fc058f59c2ed650692489732596e7"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-charting",
+            "comment": "Bump @fluentui/theme-samples to v8.7.223",
+            "commit": "ac121640c52fc058f59c2ed650692489732596e7"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-charting",
+            "comment": "Bump @fluentui/react to v8.125.4",
+            "commit": "ac121640c52fc058f59c2ed650692489732596e7"
+          }
+        ],
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-charting",
+            "commit": "5e245979f55d1694e2f2f7e303701628285c62dc",
+            "comment": "chore: use nx graph instead of manually defined devDependencies in package.json files across whole workspace"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 05 Jan 2026 14:47:16 GMT",
       "tag": "@fluentui/react-charting_v5.25.5",
       "version": "5.25.5",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # Change Log - @fluentui/react-charting
 
-This log was last generated on Mon, 05 Jan 2026 14:46:56 GMT and should not be manually modified.
+This log was last generated on Tue, 27 Jan 2026 05:17:08 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [5.25.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.25.6)
+
+Tue, 27 Jan 2026 05:17:08 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.25.5..@fluentui/react-charting_v5.25.6)
+
+### Patches
+
+- support chart title from plotly schema ([PR #35643](https://github.com/microsoft/fluentui/pull/35643) by anushgupta@microsoft.com)
+- feat(react-charting): Add prop to regulate removal of default annotation styling ([PR #35647](https://github.com/microsoft/fluentui/pull/35647) by 120183316+srmukher@users.noreply.github.com)
+- feat: improve x-axis tick label layout with automatic wrapping, truncation, or multi-level rendering based on available space ([PR #35605](https://github.com/microsoft/fluentui/pull/35605) by kumarkshitij@microsoft.com)
+- feat: add PolarChart ([PR #35651](https://github.com/microsoft/fluentui/pull/35651) by kumarkshitij@microsoft.com)
+- Bump @fluentui/react-focus to v8.10.4 ([PR #35643](https://github.com/microsoft/fluentui/pull/35643) by beachball)
+- Bump @fluentui/theme-samples to v8.7.223 ([PR #35643](https://github.com/microsoft/fluentui/pull/35643) by beachball)
+- Bump @fluentui/react to v8.125.4 ([PR #35643](https://github.com/microsoft/fluentui/pull/35643) by beachball)
+
 ## [5.25.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.25.5)
 
-Mon, 05 Jan 2026 14:46:56 GMT 
+Mon, 05 Jan 2026 14:47:16 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.25.4..@fluentui/react-charting_v5.25.5)
 
 ### Patches

package/bundle-size/PolarChart.fixture.js

@@ -0,0 +1,7 @@
+import { PolarChart } from '@fluentui/react-charting';
+
+console.log(PolarChart);
+
+export default {
+  name: 'PolarChart',
+};

package/dist/react-charting.d.ts

@@ -1,8 +1,10 @@
 import { CurveFactory } from 'd3-shape';
 import { FocusZoneDirection } from '@fluentui/react-focus';
+import type { Font } from '@fluentui/chart-utilities';
 import { ICalloutContentStyleProps } from '@fluentui/react/lib/Callout';
 import { ICalloutContentStyles } from '@fluentui/react/lib/Callout';
 import { ICalloutProps } from '@fluentui/react/lib/Callout';
+import { ICalloutProps as ICalloutProps_2 } from '@fluentui/react';
 import { IFocusZoneProps } from '@fluentui/react-focus';
 import { IHoverCardStyleProps } from '@fluentui/react/lib/HoverCard';
 import { IHoverCardStyles } from '@fluentui/react/lib/HoverCard';
@@ -559,6 +561,24 @@ export declare interface IAreaChartStyleProps extends ICartesianChartStyleProps
 export declare interface IAreaChartStyles extends ICartesianChartStyles {
 }
 
+/**
+ * Represents a areapolar series.
+ */
+declare interface IAreaPolarSeries extends IDataSeries {
+    /**
+     * Type discriminator: always 'areapolar' for this series.
+     */
+    type: 'areapolar';
+    /**
+     * Array of data points for the series.
+     */
+    data: IPolarDataPoint[];
+    /**
+     * Additional line rendering options (e.g., stroke width, curve type).
+     */
+    lineOptions?: ILineChartLineOptions;
+}
+
 declare interface IAxisData {
     yAxisDomainValues: number[];
     yAxisTickText: string[];
@@ -657,6 +677,10 @@ export declare interface IBasestate {
  * {@docCategory CartesianChart}
  */
 export declare interface ICartesianChartProps {
+    /**
+     * Title styles configuration for the chart title
+     */
+    titleStyles?: ITitleStyles;
     /**
      * Below height used for resizing of the chart
      * Wrap chart in your container and send the updated height and width to these props.
@@ -939,7 +963,17 @@ export declare interface ICartesianChartProps {
      * 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.
@@ -1321,6 +1355,10 @@ export declare interface IChartProps {
  * {@docCategory ChartTable}
  */
 export declare interface IChartTableProps {
+    /**
+     * Title styles configuration for the chart title
+     */
+    titleStyles?: ITitleStyles;
     /**
      * 1d or 2d Array of header values.
      */
@@ -1345,6 +1383,10 @@ export declare interface IChartTableProps {
      * @default '650px'
      */
     height?: string | number;
+    /**
+     * Chart title to display above the table
+     */
+    chartTitle?: string;
     /**
      * Theme (provided through customization)
      */
@@ -1379,6 +1421,8 @@ export declare interface IChartTableStyles {
     headerCell?: IStyle;
     bodyCell?: IStyle;
     chart?: IStyle;
+    chartTitle?: IStyle;
+    svgTooltip?: IStyle;
 }
 
 export declare interface IChildProps {
@@ -1549,6 +1593,10 @@ export declare interface IDonutChart {
  * {@docCategory DonutChart}
  */
 export declare interface IDonutChartProps extends ICartesianChartProps {
+    /**
+     * Title styles configuration for the chart title
+     */
+    titleStyles?: ITitleStyles;
     /**
      * Data to render in the chart.
      */
@@ -1635,6 +1683,10 @@ export declare interface IDonutChartStyles {
      * Style for the legend container.
      */
     legendContainer: IStyle;
+    /**
+     * Style for the chart title.
+     */
+    chartTitle?: IStyle;
     /**
      * styles for axis annotation
      */
@@ -1643,6 +1695,10 @@ export declare interface IDonutChartStyles {
      * Styles for the chart wrapper div
      */
     chartWrapper?: IStyle;
+    /**
+     * Style for SVG tooltip text
+     */
+    svgTooltip?: IStyle;
 }
 
 declare interface IEventAnnotation {
@@ -1696,6 +1752,10 @@ declare interface IFunnelChartDataPoint {
  * {@docCategory FunnelChart}
  */
 export declare interface IFunnelChartProps {
+    /**
+     * Title styles configuration for the chart title
+     */
+    titleStyles?: ITitleStyles;
     /**
      * Data points for the funnel chart
      */
@@ -1788,10 +1848,18 @@ export declare interface IFunnelChartStyles {
      * Styles for the chart
      */
     chart?: IStyle;
+    /**
+     * Style for the chart title.
+     */
+    chartTitle?: IStyle;
     /**
      * Styles for text elements
      */
     text?: IStyle;
+    /**
+     * Style for SVG tooltip text
+     */
+    svgTooltip?: IStyle;
     /**
      * Styles for sub-components
      */
@@ -1921,6 +1989,10 @@ export declare interface IGanttChartStyles extends ICartesianChartStyles {
  * {@docCategory GaugeChart}
  */
 export declare interface IGaugeChartProps {
+    /**
+     * Title styles configuration for the chart title
+     */
+    titleStyles?: ITitleStyles;
     /**
      * Width of the chart
      */
@@ -2120,6 +2192,10 @@ export declare interface IGaugeChartStyles {
      * Styles for the needle
      */
     needle?: IStyle;
+    /**
+     * Styles for SVG tooltip background
+     */
+    svgTooltip?: IStyle;
     /**
      * Styles for the chart title
      */
@@ -3467,6 +3543,24 @@ export declare interface ILineDataInVerticalStackedBarChart {
     lineOptions?: ILineChartLineOptions;
 }
 
+/**
+ * Represents a linepolar series.
+ */
+declare interface ILinePolarSeries extends IDataSeries {
+    /**
+     * Type discriminator: always 'linepolar' for this series.
+     */
+    type: 'linepolar';
+    /**
+     * Array of data points for the series.
+     */
+    data: IPolarDataPoint[];
+    /**
+     * Additional line rendering options (e.g., stroke width, curve type).
+     */
+    lineOptions?: ILineChartLineOptions;
+}
+
 /**
  * Represents a line series.
  */
@@ -4000,6 +4094,194 @@ export declare interface IPieChartStyles {
     chartTitle?: IStyle;
 }
 
+/**
+ * Polar Chart properties
+ * {@docCategory PolarChart}
+ */
+export declare interface IPolarChartProps {
+    /**
+     * Data series to be rendered in the polar chart.
+     */
+    data: (IAreaPolarSeries | ILinePolarSeries | IScatterPolarSeries)[];
+    /**
+     * Width of the polar chart.
+     * @default 200
+     */
+    width?: number;
+    /**
+     * Height of the polar chart.
+     * @default 200
+     */
+    height?: number;
+    /**
+     * Margins around the chart area.
+     */
+    margins?: IMargins;
+    /**
+     * If true, hides the legend.
+     * @default false
+     */
+    hideLegend?: boolean;
+    /**
+     * If true, hides the tooltip.
+     * @default false
+     */
+    hideTooltip?: boolean;
+    legendProps?: Partial<ILegendsProps>;
+    /**
+     * 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<IChart>;
+    /**
+     * 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;
+    /**
+     * Theme (provided through customization)
+     */
+    theme?: ITheme_2;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules
+     */
+    styles?: IStyleFunctionOrObject_2<IPolarChartStyleProps, IPolarChartStyles>;
+    /**
+     * Props for the callout in the chart
+     */
+    calloutProps?: Partial<ICalloutProps_2>;
+}
+
+/**
+ * Polar Chart style properties
+ * {@docCategory PolarChart}
+ */
+export declare interface IPolarChartStyleProps {
+    /**
+     * Theme (provided through customization)
+     */
+    theme: ITheme_2;
+}
+
+/**
+ * Polar Chart styles
+ * {@docCategory PolarChart}
+ */
+export declare interface IPolarChartStyles {
+    /**
+     * Style for the root element.
+     */
+    root?: IStyle_2;
+    /**
+     * Style for the chart wrapper element.
+     */
+    chartWrapper?: IStyle_2;
+    /**
+     * Style for the chart element.
+     */
+    chart?: IStyle_2;
+    /**
+     * Style for the inner grid lines.
+     */
+    gridLineInner?: IStyle_2;
+    /**
+     * Style for the outer grid lines.
+     */
+    gridLineOuter?: IStyle_2;
+    /**
+     * Style for the tick labels.
+     */
+    tickLabel?: IStyle_2;
+    /**
+     * Style for the legend container.
+     */
+    legendContainer?: IStyle_2;
+}
+
+/**
+ * Represents a single data point in a polar series.
+ */
+declare interface IPolarDataPoint {
+    /**
+     * 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?: IAccessibilityProps;
+    /**
+     * 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 IRefArrayData {
     index?: string;
     refElement?: SVGGElement;
@@ -4089,6 +4371,10 @@ export declare interface ISankeyChartData {
  * {@docCategory SankeyChart}
  */
 export declare interface ISankeyChartProps {
+    /**
+     * Title styles configuration for the chart title
+     */
+    titleStyles?: ITitleStyles;
     /**
      * Data to render in the chart.
      */
@@ -4159,6 +4445,11 @@ export declare interface ISankeyChartProps {
      * props for the callout in the chart
      */
     calloutProps?: Partial<ICalloutProps>;
+    /**
+     * Whether to hide the legend
+     * @default false
+     */
+    hideLegend?: boolean;
 }
 
 /**
@@ -4222,6 +4513,14 @@ export declare interface ISankeyChartStyles {
      * Styles for the chart svg element
      */
     chart?: IStyle;
+    /**
+     * Style for SVG tooltip text
+     */
+    svgTooltip?: IStyle;
+    /**
+     * Style for the chart title.
+     */
+    chartTitle?: IStyle;
 }
 
 /**
@@ -4328,6 +4627,20 @@ export declare interface IScatterChartStyles extends ICartesianChartStyles {
     markerLabel?: IStyle_2;
 }
 
+/**
+ * Represents a scatterpolar series.
+ */
+declare interface IScatterPolarSeries extends IDataSeries {
+    /**
+     * Type discriminator: always 'scatterpolar' for this series.
+     */
+    type: 'scatterpolar';
+    /**
+     * Array of data points for the series.
+     */
+    data: IPolarDataPoint[];
+}
+
 export declare interface IShapeProps {
     svgProps: React_2.SVGAttributes<SVGElement>;
     pathProps: React_2.SVGAttributes<SVGPathElement>;
@@ -4665,6 +4978,35 @@ declare interface ITextboxProps {
     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 ITitleStyles {
+    /**
+     * 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;
+    };
+}
+
 /**
  * {@docCategory TreeChart}
  */
@@ -5444,6 +5786,51 @@ 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;
+};
+
+/**
+ * PolarChart component.
+ * {@docCategory PolarChart}
+ */
+export declare const PolarChart: React_2.FunctionComponent<IPolarChartProps>;
+
 /**
  * Responsive Container component
  * {@docCategory ResponsiveContainer}