@fluentui/react-charts 9.3.25 → 9.3.27

package/CHANGELOG.md

@@ -1,12 +1,43 @@
 # Change Log - @fluentui/react-charts
 
-<!-- This log was last generated on Mon, 24 Aug 2026 08:15:11 GMT and should not be manually modified. -->
+<!-- This log was last generated on Wed, 23 Sep 2026 09:03:16 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## [9.3.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.27)
+
+Wed, 23 Sep 2026 09:03:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.26..@fluentui/react-charts_v9.3.27)
+
+### Patches
+
+- Bump @fluentui/react-popover to v9.14.9 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-tooltip to v9.10.7 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+
+## [9.3.26](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.26)
+
+Tue, 22 Sep 2026 11:25:39 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.25..@fluentui/react-charts_v9.3.26)
+
+### Patches
+
+- feat: add custom callout rendering to GaugeChart ([PR #36730](https://github.com/microsoft/fluentui/pull/36730) by atisjai@microsoft.com)
+- fix(react-charts): prevent prototype pollution in chart data grouping ([PR #36715](https://github.com/microsoft/fluentui/pull/36715) by v-baambati@microsoft.com)
+- fixed prototypr issue in vegalite adapter ([PR #36743](https://github.com/microsoft/fluentui/pull/36743) by v-baambati@microsoft.com)
+- Added test cases prototype pollution fix ([PR #36737](https://github.com/microsoft/fluentui/pull/36737) by v-baambati@microsoft.com)
+- feat: allow a function for the cartesian tickFormat so the numeric value axis can render a literal % or route through an app/i18n formatter (string behavior unchanged) ([PR #36369](https://github.com/microsoft/fluentui/pull/36369) by michael@xerilium.com)
+- Bump @fluentui/react-button to v9.11.1 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-overflow to v9.9.4 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-popover to v9.14.8 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-tabster to v9.26.18 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-tooltip to v9.10.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.26.7 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+
 ## [9.3.25](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.25)
 
-Mon, 24 Aug 2026 08:15:11 GMT 
+Mon, 24 Aug 2026 16:40:04 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.24..@fluentui/react-charts_v9.3.25)
 
 ### Patches

package/dist/index.d.cts

@@ -387,11 +387,16 @@ export declare interface CartesianChartProps {
      */
     tickValues?: number[] | Date[] | string[] | undefined;
     /**
-     * the format for the data on x-axis. For date object this can be specified to your requirement. Eg: '%m/%d', '%d'
-     * Please look at https://github.com/d3/d3-time-format for all the formats supported for date axis
-     * Only applicable for date axis. For y-axis format use yAxisTickFormat prop.
+     * Format for x-axis tick labels. Accepts either a d3-format string or a `(value) => string` function.
+     *
+     * String: a d3-time-format specifier for date axes (e.g. `'%m/%d'`) or a d3-format specifier for
+     * numeric axes. See https://github.com/d3/d3-time-format and https://github.com/d3/d3-format.
+     *
+     * Function: formats the tick value directly — useful when a d3-format string is insufficient,
+     * e.g. appending a literal `%` to an already-0–100 axis (d3's `%` type multiplies by 100),
+     * or routing ticks through an app/i18n formatter. For y-axis format use `yAxisTickFormat`.
      */
-    tickFormat?: string;
+    tickFormat?: string | ((value: number | Date) => string);
     /**
      * Width of line stroke
      */
@@ -1839,6 +1844,37 @@ export declare interface GanttChartStyles extends CartesianChartStyles {
 
 export declare const GaugeChart: React_2.FunctionComponent<GaugeChartProps>;
 
+/**
+ * Data provided to a custom GaugeChart callout renderer.
+ * {@docCategory GaugeChart}
+ */
+export declare interface GaugeChartCalloutData {
+    /**
+     * Legend of the segment or gauge element that opened the callout.
+     */
+    legend: string;
+    /**
+     * Current value of the gauge.
+     */
+    chartValue: number;
+    /**
+     * Minimum value of the gauge.
+     */
+    minValue: number;
+    /**
+     * Maximum value of the gauge.
+     */
+    maxValue: number;
+    /**
+     * Formatted current value displayed in the default callout.
+     */
+    chartValueLabel: string;
+    /**
+     * Segment values displayed in the default callout.
+     */
+    segmentValues: YValueHover[];
+}
+
 /**
  * Gauge Chart properties
  * {@docCategory GaugeChart}
@@ -1914,6 +1950,10 @@ export declare interface GaugeChartProps {
      * Props for the callout in the chart
      */
     calloutProps?: Partial<ChartPopoverProps>;
+    /**
+     * Defines a custom callout renderer. The second argument can be used to render the default callout content.
+     */
+    onRenderCallout?: RenderFunction<GaugeChartCalloutData>;
     /**
      * Specifies the variant of GaugeChart to be rendered
      * @defaultvalue GaugeChartVariant.MultipleSegments
@@ -3510,7 +3550,7 @@ export declare interface ModifiedCartesianChartProps extends CartesianChartProps
      */
     tickParams?: {
         tickValues?: number[] | Date[] | string[];
-        tickFormat?: string;
+        tickFormat?: string | ((value: number | Date) => string);
     };
     /**
      * it's padding between bar's or lines in the graph

package/dist/index.d.ts

@@ -387,11 +387,16 @@ export declare interface CartesianChartProps {
      */
     tickValues?: number[] | Date[] | string[] | undefined;
     /**
-     * the format for the data on x-axis. For date object this can be specified to your requirement. Eg: '%m/%d', '%d'
-     * Please look at https://github.com/d3/d3-time-format for all the formats supported for date axis
-     * Only applicable for date axis. For y-axis format use yAxisTickFormat prop.
+     * Format for x-axis tick labels. Accepts either a d3-format string or a `(value) => string` function.
+     *
+     * String: a d3-time-format specifier for date axes (e.g. `'%m/%d'`) or a d3-format specifier for
+     * numeric axes. See https://github.com/d3/d3-time-format and https://github.com/d3/d3-format.
+     *
+     * Function: formats the tick value directly — useful when a d3-format string is insufficient,
+     * e.g. appending a literal `%` to an already-0–100 axis (d3's `%` type multiplies by 100),
+     * or routing ticks through an app/i18n formatter. For y-axis format use `yAxisTickFormat`.
      */
-    tickFormat?: string;
+    tickFormat?: string | ((value: number | Date) => string);
     /**
      * Width of line stroke
      */
@@ -1839,6 +1844,37 @@ export declare interface GanttChartStyles extends CartesianChartStyles {
 
 export declare const GaugeChart: React_2.FunctionComponent<GaugeChartProps>;
 
+/**
+ * Data provided to a custom GaugeChart callout renderer.
+ * {@docCategory GaugeChart}
+ */
+export declare interface GaugeChartCalloutData {
+    /**
+     * Legend of the segment or gauge element that opened the callout.
+     */
+    legend: string;
+    /**
+     * Current value of the gauge.
+     */
+    chartValue: number;
+    /**
+     * Minimum value of the gauge.
+     */
+    minValue: number;
+    /**
+     * Maximum value of the gauge.
+     */
+    maxValue: number;
+    /**
+     * Formatted current value displayed in the default callout.
+     */
+    chartValueLabel: string;
+    /**
+     * Segment values displayed in the default callout.
+     */
+    segmentValues: YValueHover[];
+}
+
 /**
  * Gauge Chart properties
  * {@docCategory GaugeChart}
@@ -1914,6 +1950,10 @@ export declare interface GaugeChartProps {
      * Props for the callout in the chart
      */
     calloutProps?: Partial<ChartPopoverProps>;
+    /**
+     * Defines a custom callout renderer. The second argument can be used to render the default callout content.
+     */
+    onRenderCallout?: RenderFunction<GaugeChartCalloutData>;
     /**
      * Specifies the variant of GaugeChart to be rendered
      * @defaultvalue GaugeChartVariant.MultipleSegments
@@ -3510,7 +3550,7 @@ export declare interface ModifiedCartesianChartProps extends CartesianChartProps
      */
     tickParams?: {
         tickValues?: number[] | Date[] | string[];
-        tickFormat?: string;
+        tickFormat?: string | ((value: number | Date) => string);
     };
     /**
      * it's padding between bar's or lines in the graph

package/lib/components/AreaChart/AreaChart.js

@@ -262,7 +262,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
                 opacity.push(singleChartPoint.opacity || 1);
                 allChartPoints.push(...singleChartPoint.data);
             });
-            const mapOfXvalToListOfDataPoints = {};
+            const mapOfXvalToListOfDataPoints = Object.create(null);
             allChartPoints.forEach((dataPoint)=>{
                 const xValue = dataPoint.x instanceof Date ? dataPoint.x.toLocaleString() : dataPoint.x;
                 // map of x value to the list of data points which share the same x value .
@@ -362,7 +362,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     function _createDatasetForXCoordinateWithMultipleYValues(allChartPoints) {
         const dataSet = [];
         // Group data points by x-axis value
-        const groupedData = {};
+        const groupedData = Object.create(null);
         allChartPoints.forEach((dataPoint)=>{
             const xValue = dataPoint.x instanceof Date ? dataPoint.x.toLocaleString() : dataPoint.x;
             if (!groupedData[xValue]) {
@@ -810,7 +810,7 @@ export const AreaChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
             return false;
         }
         for (const item of lineChartData){
-            const xValueMap = {};
+            const xValueMap = Object.create(null);
             for (const point of item.data){
                 const xValue = point.x instanceof Date ? point.x.toLocaleString() : point.x;
                 if (!xValueMap[xValue]) {