Bugfix/chart error on interaction by registering annotation plugin early (#7049)

* Fix chart error on interaction

* Update changelog

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

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,

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,

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,

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