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

@@ -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
 

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 }
       });
     }
   }

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 };

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) => {