@spteck/fluentui-react-charts 1.1.5 → 1.1.7

package/dist/charts/BarChart/BarChart.d.ts

@@ -15,6 +15,8 @@ export interface BarProps<T> {
     theme: Theme;
     paletteId?: number;
     renderTooltipLabel?: (item: TooltipItem<'bar'>) => string | number | undefined;
+    numberFormat?: Intl.NumberFormatOptions | ((v: number) => string);
+    locale?: string | string[];
 }
-export declare function BarChart<T extends object>({ data, getPrimary, getSecondary, title, showDatalabels, stacked, theme, renderTooltipLabel, paletteId, }: BarProps<T>): React.JSX.Element;
+export declare function BarChart<T extends object>({ data, getPrimary, getSecondary, title, showDatalabels, stacked, theme, renderTooltipLabel, paletteId, numberFormat, locale, }: BarProps<T>): React.JSX.Element;
 export default BarChart;

package/dist/charts/ComboChart/ComboChart.d.ts

@@ -20,6 +20,8 @@ export interface ComboChartProps<T> {
      * 'dual' enables named y-axes ('y-bar' and 'y-line') and stacked x for bars.
      */
     axesMode?: 'legacy' | 'dual';
+    numberFormat?: Intl.NumberFormatOptions | ((v: number) => string);
+    locale?: string | string[];
 }
-export declare function ComboChart<T extends object>({ data, getPrimary, getSecondary, title, showDataLabels, theme, axesMode, renderTooltipLabel, paletteId, }: ComboChartProps<T>): React.JSX.Element;
+export declare function ComboChart<T extends object>({ data, getPrimary, getSecondary, title, showDataLabels, theme, axesMode, renderTooltipLabel, paletteId, numberFormat, locale, }: ComboChartProps<T>): React.JSX.Element;
 export default ComboChart;

package/dist/charts/Doughnut/DoughnutChart.d.ts

@@ -13,6 +13,8 @@ export interface DoughnutChartProps<T> {
     theme?: Theme;
     renderTooltipLabel?: (item: TooltipItem<'doughnut'>) => string | number | undefined;
     paletteId?: number;
+    numberFormat?: Intl.NumberFormatOptions | ((v: number) => string);
+    locale?: string | string[];
 }
-export declare function DoughnutChart<T extends object>({ data, getLabel, getValue, title, showDataLabels, theme, renderTooltipLabel, paletteId, }: DoughnutChartProps<T>): React.JSX.Element;
+export declare function DoughnutChart<T extends object>({ data, getLabel, getValue, title, showDataLabels, theme, renderTooltipLabel, paletteId, numberFormat, locale, }: DoughnutChartProps<T>): React.JSX.Element;
 export default DoughnutChart;

package/dist/charts/PieChart/PieChart.d.ts

@@ -13,6 +13,8 @@ export interface PieChartProps<T> {
     theme?: Theme;
     paletteId?: number;
     renderTooltipLabel?: (item: TooltipItem<'pie'>) => string | number | undefined;
+    numberFormat?: Intl.NumberFormatOptions | ((v: number) => string);
+    locale?: string | string[];
 }
-export declare function PieChart<T extends object>({ data, getLabel, getValue, title, showDataLabels, theme, renderTooltipLabel, paletteId, }: PieChartProps<T>): React.JSX.Element;
+export declare function PieChart<T extends object>({ data, getLabel, getValue, title, showDataLabels, theme, renderTooltipLabel, paletteId, numberFormat, locale, }: PieChartProps<T>): React.JSX.Element;
 export default PieChart;

package/dist/charts/areaChart/AreaChart.d.ts

@@ -14,6 +14,8 @@ export interface AreaChartProps<T> {
     theme?: Theme;
     paletteId?: number;
     renderTooltipLabel?: (item: TooltipItem<'line'>) => string | number | undefined;
+    numberFormat?: Intl.NumberFormatOptions | ((v: number) => string);
+    locale?: string | string[];
 }
-export declare function AreaChart<T extends object>({ data, getPrimary, getSecondary, title, showDatalabels, theme, stacked, renderTooltipLabel, paletteId, }: AreaChartProps<T>): React.JSX.Element;
+export declare function AreaChart<T extends object>({ data, getPrimary, getSecondary, title, showDatalabels, theme, stacked, renderTooltipLabel, paletteId, numberFormat, locale, }: AreaChartProps<T>): React.JSX.Element;
 export default AreaChart;

package/dist/charts/barHorizontalChart/BarHotizontalChart.d.ts

@@ -14,6 +14,8 @@ export interface BarHorizontalProps<T> {
     theme: Theme;
     paletteId?: number;
     renderTooltipLabel?: (item: TooltipItem<'bar'>) => string | number | undefined;
+    numberFormat?: Intl.NumberFormatOptions | ((v: number) => string);
+    locale?: string | string[];
 }
-export declare function BarHorizontalChart<T extends object>({ data, getPrimary, getSecondary, stacked, showDatalabels, title, theme, renderTooltipLabel, paletteId, }: BarHorizontalProps<T>): React.JSX.Element;
+export declare function BarHorizontalChart<T extends object>({ data, getPrimary, getSecondary, stacked, showDatalabels, title, theme, renderTooltipLabel, paletteId, numberFormat, locale, }: BarHorizontalProps<T>): React.JSX.Element;
 export default BarHorizontalChart;

package/dist/charts/bubbleChart/BubbleChart.d.ts

@@ -14,6 +14,8 @@ export interface BubbleChartProps<T> {
     theme?: Theme;
     paletteId?: number;
     renderTooltipLabel?: (item: TooltipItem<'bubble'>) => string | number | undefined;
+    numberFormat?: Intl.NumberFormatOptions | ((v: number) => string);
+    locale?: string | string[];
 }
-export declare function BubbleChart<T extends object>({ data, getPrimary, getSecondary, getRadius, showDataLabels, title, renderTooltipLabel, theme, paletteId, }: BubbleChartProps<T>): React.JSX.Element;
+export declare function BubbleChart<T extends object>({ data, getPrimary, getSecondary, getRadius, showDataLabels, title, renderTooltipLabel, theme, paletteId, numberFormat, locale, }: BubbleChartProps<T>): React.JSX.Element;
 export default BubbleChart;

package/dist/charts/floatBarChart/FloatBarChart.d.ts

@@ -13,6 +13,8 @@ export interface FloatingBarChartProps<T> {
     theme?: Theme;
     paletteId?: number;
     renderTooltipLabel?: (item: TooltipItem<'bar'>) => string | number | undefined;
+    numberFormat?: Intl.NumberFormatOptions | ((v: number) => string);
+    locale?: string | string[];
 }
-export declare function FloatingBarChart<T extends object>({ data, getPrimary, getRange, title, showDataLabels, theme, renderTooltipLabel, paletteId, }: FloatingBarChartProps<T>): React.JSX.Element;
+export declare function FloatingBarChart<T extends object>({ data, getPrimary, getRange, title, showDataLabels, theme, renderTooltipLabel, paletteId, numberFormat, locale, }: FloatingBarChartProps<T>): React.JSX.Element;
 export default FloatingBarChart;

package/dist/charts/lineChart/LineChart.d.ts

@@ -13,6 +13,8 @@ export interface LineChartProps<T> {
     theme?: Theme;
     paletteId?: number;
     renderTooltipLabel?: (item: TooltipItem<'line'>) => string | number | undefined;
+    numberFormat?: Intl.NumberFormatOptions | ((v: number) => string);
+    locale?: string | string[];
 }
-export declare function LineChart<T extends object>({ data, getPrimary, getSecondary, title, showDataLabels, theme, renderTooltipLabel, paletteId, }: LineChartProps<T>): React.JSX.Element;
+export declare function LineChart<T extends object>({ data, getPrimary, getSecondary, title, showDataLabels, theme, renderTooltipLabel, paletteId, numberFormat, locale, }: LineChartProps<T>): React.JSX.Element;
 export default LineChart;

package/dist/charts/polarChart/PolarChart.d.ts

@@ -13,6 +13,8 @@ export interface PolarChartProps<T> {
     theme?: Theme;
     paletteId?: number;
     renderTooltipLabel?: (item: TooltipItem<'polarArea'>) => string | number | undefined;
+    numberFormat?: Intl.NumberFormatOptions | ((v: number) => string);
+    locale?: string | string[];
 }
-export declare function PolarChart<T extends object>({ data, getLabel, getValue, title, showDataLabels, theme, renderTooltipLabel, paletteId, }: PolarChartProps<T>): React.JSX.Element;
+export declare function PolarChart<T extends object>({ data, getLabel, getValue, title, showDataLabels, theme, renderTooltipLabel, paletteId, numberFormat, locale, }: PolarChartProps<T>): React.JSX.Element;
 export default PolarChart;

package/dist/charts/radarChart/RadarChart.d.ts

@@ -13,6 +13,8 @@ export interface RadarChartProps<T> {
     theme?: Theme;
     paletteId?: number;
     renderTooltipLabel?: (item: TooltipItem<'radar'>) => string | number | undefined;
+    numberFormat?: Intl.NumberFormatOptions | ((v: number) => string);
+    locale?: string | string[];
 }
-export declare function RadarChart<T extends object>({ data, getLabel, getValue, title, showDataLabels, theme, renderTooltipLabel, paletteId, }: RadarChartProps<T>): React.JSX.Element;
+export declare function RadarChart<T extends object>({ data, getLabel, getValue, title, showDataLabels, theme, renderTooltipLabel, paletteId, numberFormat, locale, }: RadarChartProps<T>): React.JSX.Element;
 export default RadarChart;

package/dist/charts/scatterChart/ScatterChart.d.ts

@@ -13,6 +13,8 @@ export interface ScatterChartProps<T> {
     theme?: Theme;
     paletteId?: number;
     renderTooltipLabel?: (item: TooltipItem<'scatter'>) => string | number | undefined;
+    numberFormat?: Intl.NumberFormatOptions | ((v: number) => string);
+    locale?: string | string[];
 }
-export declare function ScatterChart<T extends object>({ data, getX, getY, title, showDataLabels, theme, renderTooltipLabel, paletteId, }: ScatterChartProps<T>): React.JSX.Element;
+export declare function ScatterChart<T extends object>({ data, getX, getY, title, showDataLabels, theme, renderTooltipLabel, paletteId, numberFormat, locale, }: ScatterChartProps<T>): React.JSX.Element;
 export default ScatterChart;

package/dist/charts/stackedLineChart/StackedLineChart.d.ts

@@ -13,6 +13,8 @@ export interface StackedLineChartProps<T> {
     theme?: Theme;
     paletteId?: number;
     renderTooltipLabel?: (item: TooltipItem<'line'>) => string | number | undefined;
+    numberFormat?: Intl.NumberFormatOptions | ((v: number) => string);
+    locale?: string | string[];
 }
-export declare function StackedLineChart<T extends object>({ data, getPrimary, getSecondary, title, showDataLabels, theme, renderTooltipLabel, paletteId, }: StackedLineChartProps<T>): React.JSX.Element;
+export declare function StackedLineChart<T extends object>({ data, getPrimary, getSecondary, title, showDataLabels, theme, renderTooltipLabel, paletteId, numberFormat, locale, }: StackedLineChartProps<T>): React.JSX.Element;
 export default StackedLineChart;

package/dist/charts/steamChart/SteamChart.d.ts

@@ -13,6 +13,8 @@ export interface SteamChartProps<T> {
     theme?: Theme;
     renderTooltipLabel?: (item: TooltipItem<'line'>) => string | number | undefined;
     paletteId?: number;
+    numberFormat?: Intl.NumberFormatOptions | ((v: number) => string);
+    locale?: string | string[];
 }
-export declare function SteamChart<T extends object>({ data, getPrimary, getSecondary, title, showDataLabels, theme, renderTooltipLabel, paletteId, }: SteamChartProps<T>): React.JSX.Element;
+export declare function SteamChart<T extends object>({ data, getPrimary, getSecondary, title, showDataLabels, theme, renderTooltipLabel, paletteId, numberFormat, locale, }: SteamChartProps<T>): React.JSX.Element;
 export default SteamChart;

package/dist/fluentui-react-charts.cjs.development.js

@@ -859,6 +859,12 @@ opts) {
       var dataset = item.dataset;
       var datasetLabel = 'label' in dataset && typeof dataset.label === 'string' ? dataset.label : 'Value';
       var raw = item.raw;
+      // Prepare number formatter based on opts
+      var numberFormatter = typeof (opts == null ? void 0 : opts.numberFormat) === 'function' ? opts.numberFormat : new Intl.NumberFormat(opts == null ? void 0 : opts.locale, typeof (opts == null ? void 0 : opts.numberFormat) === 'object' ? opts == null ? void 0 : opts.numberFormat : undefined).format;
+      // Helper to format numeric values for tooltips using the configured formatter
+      var formatVal = function formatVal(v) {
+        return typeof v === 'number' ? numberFormatter(v) : String(v);
+      };
       // determine extraField value, precedence: dataset.extraField > opts.extraField
       var extra;
       if (dataset && dataset.extraField !== undefined) {
@@ -879,22 +885,22 @@ opts) {
         var x = raw.x,
           y = raw.y,
           r = raw.r;
-        return datasetLabel + " \u2014 x: " + x + ", y: " + y + ", r: " + r + suffix;
+        return datasetLabel + " \u2014 x: " + formatVal(x) + ", y: " + formatVal(y) + ", r: " + formatVal(r) + suffix;
       }
       //   Scatter format { x, y }
       if (typeof raw === 'object' && raw !== null && 'x' in raw && 'y' in raw) {
         var _x = raw.x,
           _y = raw.y;
-        return datasetLabel + " \u2014 x: " + _x + ", y: " + _y + suffix;
+        return datasetLabel + " \u2014 x: " + formatVal(_x) + ", y: " + formatVal(_y) + suffix;
       }
       //  Floating bar [min, max]
       if (Array.isArray(raw) && raw.length === 2) {
         var min = raw[0],
           max = raw[1];
-        return datasetLabel + ": " + min + " \u2013 " + max + suffix;
+        return datasetLabel + ": " + formatVal(min) + " \u2013 " + formatVal(max) + suffix;
       }
       //  Default: single number or string
-      return datasetLabel + ": " + raw + suffix;
+      return datasetLabel + ": " + formatVal(raw) + suffix;
     },
     beforeTitle: function beforeTitle() {
       return '';
@@ -1111,7 +1117,9 @@ function AreaChart(_ref) {
     stacked = _ref$stacked === void 0 ? false : _ref$stacked,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useState = React.useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -1220,7 +1228,9 @@ function AreaChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: {
@@ -1252,7 +1262,7 @@ function AreaChart(_ref) {
         }
       }
     });
-  }, [title, showDatalabels, theme, fontFamily, fontSize, labelColor, gridColor, stacked, createFluentTooltip]);
+  }, [title, showDatalabels, theme, fontFamily, fontSize, labelColor, gridColor, stacked, createFluentTooltip, numberFormat, locale]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
   }, React__default.createElement("div", {
@@ -1281,7 +1291,9 @@ function BarChart(_ref) {
     theme = _ref.theme,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useState = React.useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -1390,7 +1402,9 @@ function BarChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: _extends({
@@ -1448,7 +1462,7 @@ function BarChart(_ref) {
         }
       })
     });
-  }, [title, showDatalabels, theme, fontFamily, fontSize, labelColor, gridColor, stacked, createFluentTooltip]);
+  }, [title, showDatalabels, theme, fontFamily, fontSize, labelColor, gridColor, stacked, createFluentTooltip, numberFormat, locale]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
   }, React__default.createElement("div", {
@@ -1479,7 +1493,9 @@ function BarHorizontalChart(_ref) {
     theme = _ref.theme,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useState = React.useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -1585,7 +1601,9 @@ function BarHorizontalChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: {
@@ -1617,7 +1635,7 @@ function BarHorizontalChart(_ref) {
         }
       }
     });
-  }, [title, showDatalabels, theme, fontFamily, fontSize, labelColor, gridColor, stacked, createFluentTooltip]);
+  }, [title, showDatalabels, theme, fontFamily, fontSize, labelColor, gridColor, stacked, createFluentTooltip, numberFormat, locale]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
   }, React__default.createElement("div", {
@@ -1647,7 +1665,9 @@ function BubbleChart(_ref) {
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? reactComponents.webLightTheme : _ref$theme,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useState = React.useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -1747,7 +1767,9 @@ function BubbleChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: {
@@ -1778,7 +1800,7 @@ function BubbleChart(_ref) {
         }
       }
     });
-  }, [title, showDataLabels, theme, getPrimary, getSecondary, data, fontFamily, fontSize, labelColor, gridColor, createFluentTooltip]);
+  }, [title, showDataLabels, theme, getPrimary, getSecondary, data, fontFamily, fontSize, labelColor, gridColor, createFluentTooltip, numberFormat, locale]);
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: styles.chartWithLegend
   }, React__default.createElement("div", {
@@ -1811,7 +1833,9 @@ function ComboChart(_ref) {
     axesMode = _ref$axesMode === void 0 ? 'legacy' : _ref$axesMode,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useState = React.useState(function () {
       return data.map(function (s) {
         return s.label;
@@ -1932,7 +1956,9 @@ function ComboChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       }
     });
@@ -2071,7 +2097,9 @@ function DoughnutChart(_ref) {
     theme = _ref$theme === void 0 ? reactComponents.webLightTheme : _ref$theme,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var styles = useGraphGlobalStyles();
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
@@ -2161,7 +2189,9 @@ function DoughnutChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         }),
         title: {
           display: !!title,
@@ -2220,7 +2250,9 @@ function FloatingBarChart(_ref) {
     theme = _ref$theme === void 0 ? reactComponents.webLightTheme : _ref$theme,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useState = React.useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -2326,7 +2358,9 @@ function FloatingBarChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: {
@@ -2356,7 +2390,7 @@ function FloatingBarChart(_ref) {
         }
       }
     });
-  }, [title, theme, showDataLabels, labelColor, fontFamily, fontSize, gridColor, createFluentTooltip]);
+  }, [title, theme, showDataLabels, labelColor, fontFamily, fontSize, gridColor, createFluentTooltip, numberFormat, locale]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
   }, React__default.createElement("div", {
@@ -2387,7 +2421,9 @@ function LineChart(_ref) {
     theme = _ref$theme === void 0 ? reactComponents.webLightTheme : _ref$theme,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useState = React.useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -2496,7 +2532,9 @@ function LineChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: {
@@ -2557,7 +2595,9 @@ function PieChart(_ref) {
     theme = _ref$theme === void 0 ? reactComponents.webLightTheme : _ref$theme,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useChartUtils = useChartUtils(theme),
     getFluentPalette = _useChartUtils.getFluentPalette,
     lightenColor = _useChartUtils.lightenColor;
@@ -2642,7 +2682,9 @@ function PieChart(_ref) {
     }, getInstantInteractionAnimations(), {
       plugins: {
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         }),
         legend: {
           display: false
@@ -2731,7 +2773,9 @@ function PolarChart(_ref) {
     theme = _ref$theme === void 0 ? reactComponents.webLightTheme : _ref$theme,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useChartUtils = useChartUtils(theme),
     getFluentPalette = _useChartUtils.getFluentPalette,
     lightenColor = _useChartUtils.lightenColor,
@@ -2829,7 +2873,9 @@ function PolarChart(_ref) {
           }
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         }),
         legend: {
           display: false
@@ -2851,7 +2897,7 @@ function PolarChart(_ref) {
         }
       }
     });
-  }, [theme, title, showDataLabels, createFluentTooltip]);
+  }, [theme, title, showDataLabels, createFluentTooltip, numberFormat, locale]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
   }, React__default.createElement("div", {
@@ -2882,7 +2928,9 @@ function RadarChart(_ref) {
     theme = _ref$theme === void 0 ? reactComponents.webLightTheme : _ref$theme,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useState = React.useState(function () {
       return data.map(function (s) {
         return s.label;
@@ -2982,7 +3030,9 @@ function RadarChart(_ref) {
           }
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         }),
         legend: {
           display: false
@@ -3013,7 +3063,7 @@ function RadarChart(_ref) {
         }
       }
     });
-  }, [theme, title, showDataLabels, createFluentTooltip, gridColor, labelColor, fontFamily, fontSize]);
+  }, [theme, title, showDataLabels, createFluentTooltip, gridColor, labelColor, fontFamily, fontSize, numberFormat, locale]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
   }, React__default.createElement("div", {
@@ -3042,7 +3092,9 @@ function ScatterChart(_ref) {
     theme = _ref$theme === void 0 ? reactComponents.webLightTheme : _ref$theme,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useState = React.useState(function () {
       return data.map(function (s) {
         return s.label;
@@ -3135,7 +3187,9 @@ function ScatterChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: {
@@ -3168,7 +3222,7 @@ function ScatterChart(_ref) {
         }
       }
     });
-  }, [theme, title, showDataLabels, createFluentTooltip, labelColor, fontFamily, fontSize, gridColor]);
+  }, [theme, title, showDataLabels, createFluentTooltip, labelColor, fontFamily, fontSize, gridColor, numberFormat, locale]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
   }, React__default.createElement("div", {
@@ -3197,7 +3251,9 @@ function StackedLineChart(_ref) {
     theme = _ref$theme === void 0 ? reactComponents.webLightTheme : _ref$theme,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useState = React.useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -3306,7 +3362,9 @@ function StackedLineChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: {
@@ -3338,7 +3396,7 @@ function StackedLineChart(_ref) {
         }
       }
     });
-  }, [theme, title, showDataLabels, createFluentTooltip, labelColor, fontFamily, fontSize, gridColor]);
+  }, [theme, title, showDataLabels, createFluentTooltip, labelColor, fontFamily, fontSize, gridColor, numberFormat, locale]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
   }, React__default.createElement("div", {
@@ -3367,7 +3425,9 @@ function SteamChart(_ref) {
     theme = _ref$theme === void 0 ? reactComponents.webLightTheme : _ref$theme,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useState = React.useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -3489,7 +3549,9 @@ function SteamChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       interaction: {
@@ -3530,7 +3592,7 @@ function SteamChart(_ref) {
         }
       }
     });
-  }, [theme, title, showDataLabels, createFluentTooltip, labelColor, fontFamily, fontSize, gridColor, showPercent]);
+  }, [theme, title, showDataLabels, createFluentTooltip, labelColor, fontFamily, fontSize, gridColor, showPercent, numberFormat, locale]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
   }, React__default.createElement("div", {
@@ -3576,7 +3638,10 @@ var chartProps = function chartProps(chart) {
     },
     // forward optional renderTooltipLabel if provided on the chart config
     renderTooltipLabel: chart.renderTooltipLabel,
-    paletteId: chart.paletteId
+    paletteId: chart.paletteId,
+    // forward optional number formatting options
+    numberFormat: chart.numberFormat,
+    locale: chart.locale
   };
 };
 var getChartComponent = function getChartComponent(chart, theme) {