-
- {{ element.SymbolProfile?.name }}
- @if (element.isDraft) {
- Draft
- }
-
+
+ {{ element.SymbolProfile?.name }}
+ @if (element.isDraft) {
+ Draft
+ }
@if (
element.SymbolProfile?.dataSource !== 'MANUAL' &&
From 9d06b3befa3e8e915dcc458caee7379259d64f04 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 15 Jun 2026 19:58:13 +0200
Subject: [PATCH 4/4] Bugfix/chart error on interaction by registering
annotation plugin early (#7049)
* Fix chart error on interaction
* Update changelog
---
CHANGELOG.md | 4 ++++
.../benchmark-comparator/benchmark-comparator.component.ts | 2 --
.../investment-chart/investment-chart.component.ts | 5 +----
apps/client/src/main.ts | 3 +++
libs/ui/src/lib/chart/chart.registry.ts | 7 ++++++-
5 files changed, 14 insertions(+), 7 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c981ab664..1ea25489d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Improved the user id display in the users table of the admin control panel
- Improved the language localization for German (`de`)
+### Fixed
+
+- Fixed a chart error on interaction by registering the annotation plugin early
+
## 3.11.0 - 2026-06-14
### Added
diff --git a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts
index 8d13fb91d..c474e29ab 100644
--- a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts
+++ b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts
@@ -44,7 +44,6 @@ import {
type TooltipOptions
} from 'chart.js';
import 'chartjs-adapter-date-fns';
-import annotationPlugin from 'chartjs-plugin-annotation';
import { addIcons } from 'ionicons';
import { arrowForwardOutline } from 'ionicons/icons';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@@ -86,7 +85,6 @@ export class GfBenchmarkComparatorComponent implements OnChanges, OnDestroy {
public constructor() {
Chart.register(
- annotationPlugin,
LinearScale,
LineController,
LineElement,
diff --git a/apps/client/src/app/components/investment-chart/investment-chart.component.ts b/apps/client/src/app/components/investment-chart/investment-chart.component.ts
index e55aebdda..dc3152f12 100644
--- a/apps/client/src/app/components/investment-chart/investment-chart.component.ts
+++ b/apps/client/src/app/components/investment-chart/investment-chart.component.ts
@@ -40,9 +40,7 @@ import {
type TooltipOptions
} from 'chart.js';
import 'chartjs-adapter-date-fns';
-import annotationPlugin, {
- type AnnotationOptions
-} from 'chartjs-plugin-annotation';
+import { type AnnotationOptions } from 'chartjs-plugin-annotation';
import { isAfter } from 'date-fns';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@@ -74,7 +72,6 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
public constructor() {
Chart.register(
- annotationPlugin,
BarController,
BarElement,
LinearScale,
diff --git a/apps/client/src/main.ts b/apps/client/src/main.ts
index f596de5f4..45901baec 100644
--- a/apps/client/src/main.ts
+++ b/apps/client/src/main.ts
@@ -1,5 +1,6 @@
import { InfoResponse } from '@ghostfolio/common/interfaces';
import { filterGlobalPermissions } from '@ghostfolio/common/permissions';
+import { registerChartConfiguration } from '@ghostfolio/ui/chart';
import { GF_ENVIRONMENT } from '@ghostfolio/ui/environment';
import { GfNotificationModule } from '@ghostfolio/ui/notifications';
@@ -58,6 +59,8 @@ import { environment } from './environments/environment';
enableProdMode();
}
+ registerChartConfiguration();
+
await bootstrapApplication(GfAppComponent, {
providers: [
authInterceptorProviders,
diff --git a/libs/ui/src/lib/chart/chart.registry.ts b/libs/ui/src/lib/chart/chart.registry.ts
index 465d6e716..a6a8b3e55 100644
--- a/libs/ui/src/lib/chart/chart.registry.ts
+++ b/libs/ui/src/lib/chart/chart.registry.ts
@@ -1,6 +1,7 @@
import { getTooltipPositionerMapTop } from '@ghostfolio/common/chart-helper';
-import { Tooltip, TooltipPositionerFunction, ChartType } from 'chart.js';
+import { Chart, Tooltip, TooltipPositionerFunction, ChartType } from 'chart.js';
+import annotationPlugin from 'chartjs-plugin-annotation';
interface VerticalHoverLinePluginOptions {
color?: string;
@@ -23,6 +24,10 @@ export function registerChartConfiguration() {
return;
}
+ // Register the annotation plugin early so that every chart is initialized
+ // with its state and does not crash on interaction
+ Chart.register(annotationPlugin);
+
Tooltip.positioners.top = function (_elements, eventPosition) {
return getTooltipPositionerMapTop(this.chart, eventPosition);
};