From 069f3fe71c01a065d485f966fa15c8df3a57b984 Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Tue, 3 Feb 2026 23:33:14 +0700
Subject: [PATCH] fix(client): implement custom plugin with type safety

---
 .../benchmark-comparator.component.ts          |  1 -
 .../investment-chart.component.ts              |  1 -
 libs/common/src/lib/chart-helper.ts            | 18 ++++++++++--------
 libs/ui/src/lib/chart/chart.registry.ts        | 10 ++++++++++
 .../src/lib/line-chart/line-chart.component.ts |  1 -
 5 files changed, 20 insertions(+), 11 deletions(-)

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 5fd84e994..d6df5071e 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
@@ -190,7 +190,6 @@ export class GfBenchmarkComparatorComponent implements OnChanges, OnDestroy {
                 display: false
               },
               tooltip: this.getTooltipPluginConfiguration(),
-              // @ts-ignore
               verticalHoverLine: {
                 color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`
               }
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 6b92e09de..98a52d4f9 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
@@ -223,7 +223,6 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
                 display: false
               },
               tooltip: this.getTooltipPluginConfiguration(),
-              // @ts-ignore
               verticalHoverLine: {
                 color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`
               }
diff --git a/libs/common/src/lib/chart-helper.ts b/libs/common/src/lib/chart-helper.ts
index 626b6a1c3..b79f949e3 100644
--- a/libs/common/src/lib/chart-helper.ts
+++ b/libs/common/src/lib/chart-helper.ts
@@ -106,9 +106,9 @@ export function getTooltipPositionerMapTop(
 }
 
 export function getVerticalHoverLinePlugin<T extends 'line' | 'bar'>(
-  chartCanvas: ElementRef,
+  chartCanvas: ElementRef<HTMLCanvasElement>,
   colorScheme: ColorScheme
-): Plugin<T> {
+): Plugin<T, { color: string; width: number }> {
   return {
     afterDatasetsDraw: (chart, _, options) => {
       const active = chart.getActiveElements();
@@ -126,13 +126,15 @@ export function getVerticalHoverLinePlugin<T extends 'line' | 'bar'>(
       const xValue = active[0].element.x;
 
       const context = chartCanvas.nativeElement.getContext('2d');
-      context.lineWidth = width;
-      context.strokeStyle = color;
+      if (context) {
+        context.lineWidth = width;
+        context.strokeStyle = color;
 
-      context.beginPath();
-      context.moveTo(xValue, top);
-      context.lineTo(xValue, bottom);
-      context.stroke();
+        context.beginPath();
+        context.moveTo(xValue, top);
+        context.lineTo(xValue, bottom);
+        context.stroke();
+      }
     },
     id: 'verticalHoverLine'
   };
diff --git a/libs/ui/src/lib/chart/chart.registry.ts b/libs/ui/src/lib/chart/chart.registry.ts
index af82aad4c..465d6e716 100644
--- a/libs/ui/src/lib/chart/chart.registry.ts
+++ b/libs/ui/src/lib/chart/chart.registry.ts
@@ -2,7 +2,17 @@ import { getTooltipPositionerMapTop } from '@ghostfolio/common/chart-helper';
 
 import { Tooltip, TooltipPositionerFunction, ChartType } from 'chart.js';
 
+interface VerticalHoverLinePluginOptions {
+  color?: string;
+  width?: number;
+}
+
 declare module 'chart.js' {
+  interface PluginOptionsByType<TType extends ChartType> {
+    verticalHoverLine: TType extends 'line' | 'bar'
+      ? VerticalHoverLinePluginOptions
+      : never;
+  }
   interface TooltipPositionerMap {
     top: TooltipPositionerFunction<ChartType>;
   }
diff --git a/libs/ui/src/lib/line-chart/line-chart.component.ts b/libs/ui/src/lib/line-chart/line-chart.component.ts
index 6980b6309..e6844c848 100644
--- a/libs/ui/src/lib/line-chart/line-chart.component.ts
+++ b/libs/ui/src/lib/line-chart/line-chart.component.ts
@@ -207,7 +207,6 @@ export class GfLineChartComponent
                 position: 'bottom'
               },
               tooltip: this.getTooltipPluginConfiguration(),
-              // @ts-ignore
               verticalHoverLine: {
                 color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`
               }