@fluentui/react-charts 9.3.7 → 9.3.9

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.
@@ -407,7 +430,7 @@ export declare interface CartesianChartProps {
      */
     xMinValue?: number;
     /**
-     * maximum data value point in x-axis (for numeric x-axis)
+     * maximum data value point in x-axis
      */
     xMaxValue?: number;
     /**
@@ -597,7 +620,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.
@@ -809,17 +842,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';
@@ -830,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 {
@@ -1016,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.
      */
@@ -1040,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
      */
@@ -1065,6 +1131,8 @@ export declare interface ChartTableStyles {
     headerCell?: string;
     bodyCell?: string;
     chart?: string;
+    chartTitle?: string;
+    svgTooltip?: string;
 }
 
 declare enum ChartTypes {
@@ -1339,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.
      */
@@ -1459,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
      */
@@ -1467,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 {
@@ -1536,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
      */
@@ -1620,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
      */
@@ -1752,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
      */
@@ -1900,6 +1996,10 @@ export declare interface GaugeChartStyles {
      * Styles for the chart title
      */
     chartTitle?: string;
+    /**
+     * Style for SVG tooltip text
+     */
+    svgTooltip?: string;
     /**
      * Styles for the segments
      */
@@ -2146,6 +2246,10 @@ export declare interface GVBarChartSeriesPoint {
      * False by default.
      */
     useSecondaryYScale?: boolean;
+    /**
+     * Label to display on the bar
+     */
+    barLabel?: string;
 }
 
 export declare interface GVDataPoint {
@@ -2527,6 +2631,10 @@ export declare interface HorizontalBarChartWithAxisDataPoint {
      * 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
      */
@@ -2591,6 +2699,11 @@ export declare interface HorizontalBarChartWithAxisProps extends CartesianChartP
      * The prop used to enable rounded corners for the bars.
      */
     roundCorners?: boolean;
+    /**
+     * Prop to hide the bar labels
+     * @default false
+     */
+    hideLabels?: boolean;
 }
 
 /**
@@ -2648,6 +2761,10 @@ export declare interface HorizontalBarChartWithAxisStyles extends CartesianChart
      * Style to change the opacity of bars in dataviz when we hover on a single bar or legends
      */
     opacityChangeOnHover: string;
+    /**
+     * Style for the bar labels displayed at the end of each bar
+     */
+    barLabel?: string;
 }
 
 /**
@@ -3261,6 +3378,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.
  */
@@ -3477,6 +3612,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;
@@ -3624,6 +3976,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.
      */
@@ -3694,6 +4050,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
      */
@@ -3751,6 +4112,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<{}, {}>, {}, {}>;
@@ -3845,6 +4214,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
      */
@@ -3873,6 +4246,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}
@@ -4005,6 +4392,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}
@@ -4055,6 +4471,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;
 }
 
 /**
@@ -4398,6 +4819,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/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';