@fluentui/react-charting 5.25.4 → 5.25.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-charting",
-  "version": "5.25.4",
+  "version": "5.25.6",
   "description": "React web charting controls for Microsoft fluentui system.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -25,20 +25,12 @@
     "test:tz": "node ./scripts/run-tests-in-timezone.js"
   },
   "devDependencies": {
-    "@fluentui/eslint-plugin": "*",
-    "@fluentui/react": "*",
-    "@types/react-addons-test-utils": "0.14.18",
-    "@fluentui/jest-serializer-merge-styles": "*",
-    "@fluentui/scripts-api-extractor": "*",
-    "@fluentui/scripts-jest": "*",
-    "@fluentui/scripts-tasks": "*",
-    "@fluentui/scripts-webpack": "*",
     "jest-canvas-mock": "2.4.0"
   },
   "dependencies": {
     "@fluentui/chart-utilities": "^1.1.38",
-    "@fluentui/react-focus": "^8.10.3",
-    "@fluentui/theme-samples": "^8.7.222",
+    "@fluentui/react-focus": "^8.10.4",
+    "@fluentui/theme-samples": "^8.7.223",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@types/d3-array": "^3.0.0",
     "@types/d3-axis": "^3.0.0",
@@ -66,7 +58,7 @@
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
-    "@fluentui/react": "^8.125.3",
+    "@fluentui/react": "^8.125.4",
     "@types/react": ">=16.8.0 <20.0.0",
     "@types/react-dom": ">=16.8.0 <20.0.0",
     "react": ">=16.8.0 <20.0.0",

package/project.json

@@ -3,7 +3,6 @@
   "$schema": "../../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "tags": ["v8", "ships-bundle", "charting"],
-  "implicitDependencies": [],
   "targets": {
     "test": {
       "dependsOn": ["^build"]

package/src/components/ChartTable/ChartTable.types.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { ITheme, IStyle } from '@fluentui/react/lib/Styling';
 import { IRefObject, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
 import { IChart } from '../../types/index';
+import { ITitleStyles } from '../../utilities/Common.styles';
 
 export interface IChartTableStyleProps {
   theme: ITheme;
@@ -13,6 +14,11 @@ export interface IChartTableStyleProps {
  * {@docCategory ChartTable}
  */
 export interface IChartTableProps {
+  /**
+   * Title styles configuration for the chart title
+   */
+  titleStyles?: ITitleStyles;
+
   /**
    * 1d or 2d Array of header values.
    */
@@ -35,6 +41,11 @@ export interface IChartTableProps {
    */
   height?: string | number;
 
+  /**
+   * Chart title to display above the table
+   */
+  chartTitle?: string;
+
   /**
    * Theme (provided through customization)
    */
@@ -67,4 +78,6 @@ export interface IChartTableStyles {
   headerCell?: IStyle;
   bodyCell?: IStyle;
   chart?: IStyle;
+  chartTitle?: IStyle;
+  svgTooltip?: IStyle;
 }

package/src/components/CommonComponents/Annotations/ChartAnnotationLayer.types.ts

@@ -36,6 +36,11 @@ export interface IChartAnnotationLayerProps {
   context: IChartAnnotationContext;
   theme: ITheme;
   className?: string;
+  /**
+   * When true, removes default border, shadow, and background styling from annotations.
+   * @default false
+   */
+  hideDefaultStyles?: boolean;
 }
 
 export interface IResolvedAnnotationPosition {

package/src/components/CommonComponents/CartesianChart.types.ts

@@ -5,6 +5,7 @@ import { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';
 import { IFocusZoneProps, FocusZoneDirection } from '@fluentui/react-focus';
 import { ICalloutProps } from '@fluentui/react/lib/Callout';
 import { ILegendsProps } from '../Legends/index';
+import { ITitleStyles } from '../../utilities/Common.styles';
 import {
   AxisCategoryOrder,
   AxisProps,
@@ -221,6 +222,11 @@ export interface ICartesianChartStyles {
  * {@docCategory CartesianChart}
  */
 export 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.
@@ -322,6 +328,11 @@ export interface ICartesianChartProps {
    */
   yMaxValue?: number;
 
+  /**
+   * minimum data value point in x-axis (for numeric x-axis)
+   */
+  xMinValue?: number;
+
   /**
    * maximum data value point in x-axis
    */
@@ -561,7 +572,17 @@ export 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.

package/src/components/DonutChart/DonutChart.types.ts

@@ -3,6 +3,7 @@ import { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '@fluentui/r
 import { ICartesianChartProps, ICartesianChartStyleProps } from '../CommonComponents/index';
 import { ICalloutProps } from '@fluentui/react/lib/Callout';
 import { IChartProps, IChartDataPoint, IChart } from './index';
+import type { ITitleStyles } from '../../utilities/Common.styles';
 
 export interface IDonutChart {}
 
@@ -11,6 +12,11 @@ export interface IDonutChart {}
  * {@docCategory DonutChart}
  */
 export interface IDonutChartProps extends ICartesianChartProps {
+  /**
+   * Title styles configuration for the chart title
+   */
+  titleStyles?: ITitleStyles;
+
   /**
    * Data to render in the chart.
    */
@@ -110,6 +116,11 @@ export interface IDonutChartStyles {
    */
   legendContainer: IStyle;
 
+  /**
+   * Style for the chart title.
+   */
+  chartTitle?: IStyle;
+
   /**
    * styles for axis annotation
    */
@@ -119,4 +130,9 @@ export interface IDonutChartStyles {
    * Styles for the chart wrapper div
    */
   chartWrapper?: IStyle;
+
+  /**
+   * Style for SVG tooltip text
+   */
+  svgTooltip?: IStyle;
 }

package/src/components/FunnelChart/FunnelChart.types.ts

@@ -4,6 +4,7 @@ import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
 import { ICalloutContentStyleProps, ICalloutContentStyles } from '@fluentui/react/lib/Callout';
 import { ILegendsProps } from '../Legends/index';
 import { ICalloutProps } from '@fluentui/react/lib/Callout';
+import { ITitleStyles } from '../../utilities/Common.styles';
 
 /**
  * Data point for funnel chart
@@ -34,6 +35,11 @@ export interface IFunnelChartDataPoint {
  * {@docCategory FunnelChart}
  */
 export interface IFunnelChartProps {
+  /**
+   * Title styles configuration for the chart title
+   */
+  titleStyles?: ITitleStyles;
+
   /**
    * Data points for the funnel chart
    */
@@ -139,11 +145,21 @@ export interface IFunnelChartStyles {
    */
   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
    */

package/src/components/GaugeChart/GaugeChart.types.ts

@@ -3,6 +3,7 @@ import { IRefObject, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilitie
 import { ILegendsProps } from '../Legends/index';
 import { IAccessibilityProps, IChart } from '../../types/index';
 import { ICalloutProps } from '@fluentui/react/lib/Callout';
+import { ITitleStyles } from '../../utilities/Common.styles';
 
 /**
  * Gauge Chart segment interface.
@@ -56,6 +57,11 @@ export enum GaugeChartVariant {
  * {@docCategory GaugeChart}
  */
 export interface IGaugeChartProps {
+  /**
+   * Title styles configuration for the chart title
+   */
+  titleStyles?: ITitleStyles;
+
   /**
    * Width of the chart
    */
@@ -267,6 +273,11 @@ export interface IGaugeChartStyles {
    */
   needle?: IStyle;
 
+  /**
+   * Styles for SVG tooltip background
+   */
+  svgTooltip?: IStyle;
+
   /**
    * Styles for the chart title
    */

package/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.types.ts

@@ -71,6 +71,12 @@ export interface IHorizontalBarChartWithAxisProps extends ICartesianChartProps {
    * The prop used to enable rounded corners for the bars.
    */
   roundCorners?: boolean;
+
+  /**
+   * Prop to hide the bar labels
+   * @default false
+   */
+  hideLabels?: boolean;
 }
 
 /**
@@ -135,4 +141,9 @@ export interface IHorizontalBarChartWithAxisStyles extends ICartesianChartStyles
    * 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;
 }

package/src/components/PolarChart/PolarChart.types.ts

@@ -0,0 +1,232 @@
+import * as React from 'react';
+import {
+  IAreaPolarSeries,
+  AxisCategoryOrder,
+  AxisProps,
+  AxisScaleType,
+  IChart,
+  ILinePolarSeries,
+  IMargins,
+  IScatterPolarSeries,
+} from '../../types/IDataPoint';
+import { ILegendsProps } from '../Legends/Legends.types';
+import { ICalloutProps, IStyle, IStyleFunctionOrObject, ITheme } from '@fluentui/react';
+
+/**
+ * Configuration options for a polar axis.
+ * {@docCategory PolarChart}
+ */
+export 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;
+};
+
+/**
+ * Polar Chart properties
+ * {@docCategory PolarChart}
+ */
+export 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;
+
+  /*
+   * Properties for customizing the legend.
+   */
+  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.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;
+
+  /**
+   * Call to provide customized styling that will layer on top of the variant rules
+   */
+  styles?: IStyleFunctionOrObject<IPolarChartStyleProps, IPolarChartStyles>;
+
+  /**
+   * Props for the callout in the chart
+   */
+  calloutProps?: Partial<ICalloutProps>;
+}
+
+/**
+ * Polar Chart style properties
+ * {@docCategory PolarChart}
+ */
+export interface IPolarChartStyleProps {
+  /**
+   * Theme (provided through customization)
+   */
+  theme: ITheme;
+}
+
+/**
+ * Polar Chart styles
+ * {@docCategory PolarChart}
+ */
+export interface IPolarChartStyles {
+  /**
+   * Style for the root element.
+   */
+  root?: IStyle;
+
+  /**
+   * Style for the chart wrapper element.
+   */
+  chartWrapper?: IStyle;
+
+  /**
+   * Style for the chart element.
+   */
+  chart?: IStyle;
+
+  /**
+   * Style for the inner grid lines.
+   */
+  gridLineInner?: IStyle;
+
+  /**
+   * Style for the outer grid lines.
+   */
+  gridLineOuter?: IStyle;
+
+  /**
+   * Style for the tick labels.
+   */
+  tickLabel?: IStyle;
+
+  /**
+   * Style for the legend container.
+   */
+  legendContainer?: IStyle;
+}

package/src/components/SankeyChart/SankeyChart.types.ts

@@ -2,6 +2,7 @@ import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
 import { IRefObject, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
 import { ICalloutProps } from '@fluentui/react/lib/Callout';
 import { IChart, IChartProps } from '../../types/IDataPoint';
+import { ITitleStyles } from '../../utilities/Common.styles';
 
 export type { IChartProps, IDataPoint, ISankeyChartData } from '../../types/IDataPoint';
 
@@ -10,6 +11,11 @@ export type { IChartProps, IDataPoint, ISankeyChartData } from '../../types/IDat
  * {@docCategory SankeyChart}
  */
 export interface ISankeyChartProps {
+  /**
+   * Title styles configuration for the chart title
+   */
+  titleStyles?: ITitleStyles;
+
   /**
    * Data to render in the chart.
    */
@@ -96,6 +102,12 @@ export interface ISankeyChartProps {
    * props for the callout in the chart
    */
   calloutProps?: Partial<ICalloutProps>;
+
+  /**
+   * Whether to hide the legend
+   * @default false
+   */
+  hideLegend?: boolean;
 }
 
 /**
@@ -156,6 +168,16 @@ export interface ISankeyChartStyles {
    * Styles for the chart svg element
    */
   chart?: IStyle;
+
+  /**
+   * Style for SVG tooltip text
+   */
+  svgTooltip?: IStyle;
+
+  /**
+   * Style for the chart title.
+   */
+  chartTitle?: IStyle;
 }
 
 /**

package/src/components/ScatterChart/ScatterChart.types.ts

@@ -37,6 +37,11 @@ export interface IScatterChartProps extends ICartesianChartProps {
    */
   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
    */