From f4d17c786ae94e36251049a3a537d9addd01b7ed Mon Sep 17 00:00:00 2001
From: Parman Mohammadalizadeh <prmma23@gmail.com>
Date: Mon, 15 Jun 2026 21:44:29 +0330
Subject: [PATCH] Bugfix/open account details dialog on allocations page
 (#6988)

* Fix open account details dialog

* Update changelog

---------

Co-authored-by: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
---
 CHANGELOG.md                                   |  1 +
 .../allocations/allocations-page.component.ts  |  6 +++---
 .../interfaces/interfaces.ts                   |  5 +++++
 .../portfolio-proportion-chart.component.ts    | 18 +++++++++---------
 4 files changed, 18 insertions(+), 12 deletions(-)
 create mode 100644 libs/ui/src/lib/portfolio-proportion-chart/interfaces/interfaces.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1ea25489d..cbd9369b6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Fixed a chart error on interaction by registering the annotation plugin early
+- Fixed an issue on the allocations page where clicking an account in the _By Account_ chart did not open the detail dialog
 
 ## 3.11.0 - 2026-06-14
 
diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts b/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
index d53977ae8..26601ad59 100644
--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
@@ -185,10 +185,10 @@ export class GfAllocationsPageComponent implements OnInit {
     this.initialize();
   }
 
-  public onAccountChartClicked({ symbol }: AssetProfileIdentifier) {
-    if (symbol && symbol !== UNKNOWN_KEY) {
+  public onAccountChartClicked({ accountId }: { accountId: string }) {
+    if (accountId && accountId !== UNKNOWN_KEY) {
       this.router.navigate([], {
-        queryParams: { accountId: symbol, accountDetailDialog: true }
+        queryParams: { accountId, accountDetailDialog: true }
       });
     }
   }
diff --git a/libs/ui/src/lib/portfolio-proportion-chart/interfaces/interfaces.ts b/libs/ui/src/lib/portfolio-proportion-chart/interfaces/interfaces.ts
new file mode 100644
index 000000000..25d12b049
--- /dev/null
+++ b/libs/ui/src/lib/portfolio-proportion-chart/interfaces/interfaces.ts
@@ -0,0 +1,5 @@
+import { AssetProfileIdentifier } from '@ghostfolio/common/interfaces';
+
+export type PortfolioProportionChartClickEvent =
+  | AssetProfileIdentifier
+  | { accountId: string };
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 e2c41e956..bf6fd193e 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
@@ -1,10 +1,7 @@
 import { getTooltipOptions } from '@ghostfolio/common/chart-helper';
 import { UNKNOWN_KEY } from '@ghostfolio/common/config';
 import { getLocale, getSum, getTextColor } from '@ghostfolio/common/helper';
-import {
-  AssetProfileIdentifier,
-  PortfolioPosition
-} from '@ghostfolio/common/interfaces';
+import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 import { ColorScheme } from '@ghostfolio/common/types';
 
 import {
@@ -36,6 +33,8 @@ import Color from 'color';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import OpenColor from 'open-color';
 
+import { PortfolioProportionChartClickEvent } from './interfaces/interfaces';
+
 const {
   blue,
   cyan,
@@ -80,7 +79,8 @@ export class GfPortfolioProportionChartComponent
   public chart: Chart<'doughnut'>;
   public isLoading = true;
 
-  protected readonly proportionChartClicked = output<AssetProfileIdentifier>();
+  protected readonly proportionChartClicked =
+    output<PortfolioProportionChartClickEvent>();
 
   private readonly OTHER_KEY = 'OTHER';
 
@@ -355,11 +355,11 @@ export class GfPortfolioProportionChartComponent
                 const dataIndex = activeElements[0].index;
                 const symbol = chart.data.labels?.[dataIndex] as string;
 
-                const dataSource = this.data[symbol].dataSource;
+                const dataSource = this.data[symbol]?.dataSource;
 
-                if (dataSource) {
-                  this.proportionChartClicked.emit({ dataSource, symbol });
-                }
+                this.proportionChartClicked.emit(
+                  dataSource ? { dataSource, symbol } : { accountId: symbol }
+                );
               } catch {}
             },
             onHover: (event, chartElement) => {