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