fix: number format config not being respected for graphs (#2832)

* Add computed padding for handling clipped Net worth amounts

* Add comment, early handle 5 character case

* Add release note

* Use currency decimal preference for Net Worth graph Y-axis ticks

* use number format preference for `BarLineGraph` ticks

* use number format preference for checking `NetWorthGraph` tick overflow

* prevent `numberFormatConfig` overwrite

`getNumberFormat` uses `numberFormatConfig` as the default argument;
passing just `{ hideFraction: true }` caused `numberFormatConfig.format`
to be ignored

* add release note

* use `amountToCurrencyNoDecimal` instead for `{BarLine,NetWorth}Graph` ticks

packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx

@@ -13,6 +13,8 @@ import {
   ResponsiveContainer,
 } from 'recharts';
 
+import { amountToCurrencyNoDecimal } from 'loot-core/shared/util';
+
 import { theme } from '../../../style';
 import { type CSSProperties } from '../../../style';
 import { AlignedText } from '../../common/AlignedText';
@@ -77,7 +79,7 @@ type BarLineGraphProps = {
 
 export function BarLineGraph({ style, data, compact }: BarLineGraphProps) {
   const tickFormatter = tick => {
-    return `${Math.round(tick).toLocaleString()}`; // Formats the tick values as strings with commas
+    return `${amountToCurrencyNoDecimal(Math.round(tick))}`; // Formats the tick values as strings with commas
   };
 
   return (

packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx

@@ -12,6 +12,8 @@ import {
   ResponsiveContainer,
 } from 'recharts';
 
+import { amountToCurrencyNoDecimal } from 'loot-core/shared/util';
+
 import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
 import { useResponsive } from '../../../ResponsiveProvider';
 import { theme } from '../../../style';
@@ -35,7 +37,11 @@ export function NetWorthGraph({
   const { isNarrowWidth } = useResponsive();
 
   const tickFormatter = tick => {
-    return privacyMode ? '...' : `${Math.round(tick).toLocaleString()}`; // Formats the tick values as strings with commas
+    const res = privacyMode
+      ? '...'
+      : `${amountToCurrencyNoDecimal(Math.round(tick))}`; // Formats the tick values as strings with commas
+
+    return res;
   };
 
   const gradientOffset = () => {
@@ -197,7 +203,7 @@ function computePadding(netWorthData: Array<{ y: number }>) {
    */
   const maxLength = Math.max(
     ...netWorthData.map(({ y }) => {
-      return Math.round(y).toLocaleString().length;
+      return amountToCurrencyNoDecimal(Math.round(y)).length;
     }),
   );
 

packages/loot-core/src/shared/util.ts

@@ -341,7 +341,10 @@ export function amountToCurrency(n) {
 }
 
 export function amountToCurrencyNoDecimal(n) {
-  return getNumberFormat({ hideFraction: true }).formatter.format(n);
+  return getNumberFormat({
+    ...numberFormatConfig,
+    hideFraction: true,
+  }).formatter.format(n);
 }
 
 export function currencyToAmount(str: string) {

upcoming-release-notes/2832.md

+---
+category: Bugfix
+authors: [sreetamdas]
+---
+
+Fix number format preference not being used for graphs