fix(client): implement custom plugin with type safety

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

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

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

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

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