@fluentui/react-charting 5.25.4 → 5.25.6

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.
@@ -741,6 +765,10 @@ export declare interface ICartesianChartProps {
      * 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
      */
@@ -935,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.
@@ -1317,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.
      */
@@ -1341,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)
      */
@@ -1375,6 +1421,8 @@ export declare interface IChartTableStyles {
     headerCell?: IStyle;
     bodyCell?: IStyle;
     chart?: IStyle;
+    chartTitle?: IStyle;
+    svgTooltip?: IStyle;
 }
 
 export declare interface IChildProps {
@@ -1545,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.
      */
@@ -1631,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
      */
@@ -1639,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 {
@@ -1692,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
      */
@@ -1784,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
      */
@@ -1917,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
      */
@@ -2116,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
      */
@@ -2366,6 +2446,10 @@ export declare interface IGVBarChartSeriesPoint {
      * Accessibility data for callout
      */
     callOutAccessibilityData?: IAccessibilityProps;
+    /**
+     * Label to display on the bar
+     */
+    barLabel?: string;
     /**
      * Whether to use the secondary y scale or not
      * False by default.
@@ -2783,6 +2867,10 @@ export declare interface IHorizontalBarChartWithAxisDataPoint {
      * This is an optional prop, If haven't given data will take
      */
     yAxisCalloutData?: string;
+    /**
+     * Label to display on the bar
+     */
+    barLabel?: string;
     /**
      * onClick action for each datapoint in the chart
      */
@@ -2847,6 +2935,11 @@ export declare interface IHorizontalBarChartWithAxisProps extends ICartesianChar
      * The prop used to enable rounded corners for the bars.
      */
     roundCorners?: boolean;
+    /**
+     * Prop to hide the bar labels
+     * @default false
+     */
+    hideLabels?: boolean;
 }
 
 /**
@@ -2904,6 +2997,10 @@ export declare interface IHorizontalBarChartWithAxisStyles extends ICartesianCha
      * Style to change the opacity of bars in dataviz when we hover on a single bar or legends
      */
     opacityChangeOnHover: IStyle;
+    /**
+     * Style for the labels displayed on the bars.
+     */
+    barLabel?: IStyle;
 }
 
 /**
@@ -3446,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.
  */
@@ -3979,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;
@@ -4068,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.
      */
@@ -4138,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;
 }
 
 /**
@@ -4201,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;
 }
 
 /**
@@ -4275,6 +4595,10 @@ export declare interface IScatterChartProps extends ICartesianChartProps {
      * Define a custom callout renderer for a data point
      */
     onRenderCalloutPerDataPoint?: IRenderFunction<ICustomizedCalloutData>;
+    /**
+     * Define a custom callout renderer for a stack; default is to render per data point
+     */
+    onRenderCalloutPerStack?: IRenderFunction<ICustomizedCalloutData>;
     /**
      * Callback for getting callout description message
      */
@@ -4303,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>;
@@ -4324,6 +4662,7 @@ declare interface ISLinkExtra {
      */
     value: number;
     unnormalizedValue?: number;
+    color?: string;
 }
 
 declare interface ISNodeExtra {
@@ -4639,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}
  */
@@ -4881,6 +5249,11 @@ export declare interface IVerticalBarChartDataPoint {
      * Accessibility data for callout
      */
     callOutAccessibilityData?: IAccessibilityProps;
+    /**
+     * Label to display on the bar
+     * This is an optional prop that can be used to show custom text on bars
+     */
+    barLabel?: string;
 }
 
 /**
@@ -5302,6 +5675,11 @@ export declare interface IVSChartDataPoint {
      * Accessibility data for callout
      */
     callOutAccessibilityData?: IAccessibilityProps;
+    /**
+     * Label to display on the bar
+     * This is an optional prop that can be used to show custom text on bars
+     */
+    barLabel?: string;
 }
 
 declare interface IYAxisParams extends AxisProps {
@@ -5408,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}