From e769fabbaeac67edf173e4aadb0b4da3d3ef1a39 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 13 Mar 2022 21:39:06 +0100
Subject: [PATCH] Feature/add multilines to tooltips in proportion chart (#753)

* Introduce multilines for tooltips

* Update changelog
---
 CHANGELOG.md                                         |  1 +
 .../portfolio-proportion-chart.component.ts          | 12 ++++++------
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ea930a8ca..3502aef38 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Restructured the portfolio summary tab on the home page
+- Improved the tooltips in the portfolio proportion chart component by introducing multilines
 
 ## 1.125.0 - 12.03.2022
 
diff --git a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
index 9fee13d0e..803e52fea 100644
--- a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
+++ b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
@@ -324,16 +324,16 @@ export class PortfolioProportionChartComponent
                     const percentage = (context.parsed * 100) / sum;
 
                     if (this.isInPercent) {
-                      return `${name ?? symbol} (${percentage.toFixed(2)}%)`;
+                      return [`${name ?? symbol}`, `${percentage.toFixed(2)}%`];
                     } else {
                       const value = <number>context.raw;
-                      return `${name ?? symbol}: ${value.toLocaleString(
-                        this.locale,
-                        {
+                      return [
+                        `${name ?? symbol}`,
+                        `${value.toLocaleString(this.locale, {
                           maximumFractionDigits: 2,
                           minimumFractionDigits: 2
-                        }
-                      )} ${this.baseCurrency} (${percentage.toFixed(2)}%)`;
+                        })} ${this.baseCurrency} (${percentage.toFixed(2)}%)`
+                      ];
                     }
                   }
                 }