From 828a8190d9269f0a09c723b3fb26cf6eb44cf732 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 4 Oct 2026 10:37:07 +0200
Subject: [PATCH] Fix percent formatting in treemap chart

---
 .../treemap-chart/treemap-chart.component.ts  | 41 +++++++------------
 1 file changed, 14 insertions(+), 27 deletions(-)

diff --git a/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts b/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts
index e2f6b2616f..f7e086ab36 100644
--- a/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts
+++ b/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts
@@ -186,18 +186,6 @@ export class GfTreemapChartComponent
     return dataset[activeElement.index];
   }
 
-  private getRoundedValue({
-    precision,
-    value
-  }: {
-    precision: number;
-    value: number;
-  }) {
-    const roundedValue = round(value, precision);
-
-    return roundedValue === 0 ? 0 : roundedValue;
-  }
-
   private initialize() {
     const holdings = this.holdings();
 
@@ -326,18 +314,18 @@ export class GfTreemapChartComponent
             formatter: (context: GfTreemapScriptableContext) => {
               const raw = context.raw as GfTreemapDataPoint;
 
-              const netPerformancePercentWithCurrencyEffect =
-                this.getRoundedValue({
-                  precision: 4,
-                  value: raw._data.netPerformancePercentWithCurrencyEffect
-                });
-
               const name = raw._data.assetProfile.name;
               const symbol = raw._data.assetProfile.symbol;
 
               return [
                 isUUID(symbol) ? (name ?? symbol) : symbol,
-                `${netPerformancePercentWithCurrencyEffect > 0 ? '+' : ''}${(netPerformancePercentWithCurrencyEffect * 100).toFixed(2)}%`
+                `${(
+                  raw._data.netPerformancePercentWithCurrencyEffect * 100
+                ).toLocaleString(this.locale(), {
+                  maximumFractionDigits: 2,
+                  minimumFractionDigits: 2,
+                  signDisplay: 'exceptZero'
+                })}%`
               ];
             },
             hoverColor: undefined,
@@ -412,14 +400,13 @@ export class GfTreemapChartComponent
           const allocationInPercentage = `${(raw._data.allocationInPercentage * 100).toFixed(2)}%`;
           const name = getHoldingName(raw._data.assetProfile);
 
-          const netPerformancePercentWithCurrencyEffect = this.getRoundedValue({
-            precision: 4,
-            value: raw._data.netPerformancePercentWithCurrencyEffect
-          });
-
-          const sign = netPerformancePercentWithCurrencyEffect > 0 ? '+' : '';
-
-          const netPerformanceInPercentageWithSign = `${sign}${(netPerformancePercentWithCurrencyEffect * 100).toFixed(2)}%`;
+          const netPerformanceInPercentageWithSign = `${(
+            raw._data.netPerformancePercentWithCurrencyEffect * 100
+          ).toLocaleString(this.locale(), {
+            maximumFractionDigits: 2,
+            minimumFractionDigits: 2,
+            signDisplay: 'exceptZero'
+          })}%`;
 
           if (raw._data.valueInBaseCurrency !== null) {
             const value = raw._data.valueInBaseCurrency;