@spteck/fluentui-react-charts 1.1.6 → 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/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

@@ -1117,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) {
@@ -1226,7 +1228,9 @@ function AreaChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: {
@@ -1258,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", {
@@ -1287,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) {
@@ -1396,7 +1402,9 @@ function BarChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: _extends({
@@ -1454,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", {
@@ -1485,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) {
@@ -1591,7 +1601,9 @@ function BarHorizontalChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: {
@@ -1623,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", {
@@ -1653,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) {
@@ -1753,7 +1767,9 @@ function BubbleChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: {
@@ -1784,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", {
@@ -1817,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;
@@ -1938,7 +1956,9 @@ function ComboChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       }
     });
@@ -2077,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,
@@ -2167,7 +2189,9 @@ function DoughnutChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         }),
         title: {
           display: !!title,
@@ -2226,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) {
@@ -2332,7 +2358,9 @@ function FloatingBarChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: {
@@ -2362,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", {
@@ -2567,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;
@@ -2652,7 +2682,9 @@ function PieChart(_ref) {
     }, getInstantInteractionAnimations(), {
       plugins: {
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         }),
         legend: {
           display: false
@@ -2741,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,
@@ -2839,7 +2873,9 @@ function PolarChart(_ref) {
           }
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         }),
         legend: {
           display: false
@@ -2861,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", {
@@ -2892,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;
@@ -2992,7 +3030,9 @@ function RadarChart(_ref) {
           }
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         }),
         legend: {
           display: false
@@ -3023,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", {
@@ -3052,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;
@@ -3145,7 +3187,9 @@ function ScatterChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: {
@@ -3178,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", {
@@ -3207,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) {
@@ -3316,7 +3362,9 @@ function StackedLineChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: {
@@ -3348,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", {
@@ -3377,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) {
@@ -3499,7 +3549,9 @@ function SteamChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       interaction: {
@@ -3540,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", {