From b22c076161980f35a951b1068e3f63555ed6ec3d Mon Sep 17 00:00:00 2001
From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Mon, 5 Oct 2026 01:11:15 +0700
Subject: [PATCH] Task/widen input types in line chart component (#8050)

Widen input types
---
 .../src/lib/line-chart/line-chart.component.ts | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

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 ad399496e2..782d987856 100644
--- a/libs/ui/src/lib/line-chart/line-chart.component.ts
+++ b/libs/ui/src/lib/line-chart/line-chart.component.ts
@@ -6,7 +6,10 @@ import {
 } from '@ghostfolio/common/chart-helper';
 import { primaryColorRgb, secondaryColorRgb } from '@ghostfolio/common/config';
 import { getBackgroundColor, getLocale } from '@ghostfolio/common/helper';
-import { LineChartItem } from '@ghostfolio/common/interfaces';
+import {
+  LineChartItem,
+  NullableLineChartItem
+} from '@ghostfolio/common/interfaces';
 import { ColorScheme } from '@ghostfolio/common/types';
 
 import {
@@ -24,6 +27,7 @@ import {
 import {
   type AnimationsSpec,
   Chart,
+  type ChartData,
   Filler,
   LinearScale,
   LineController,
@@ -52,10 +56,10 @@ import {
 export class GfLineChartComponent
   implements AfterViewInit, OnChanges, OnDestroy
 {
-  @Input() benchmarkDataItems: LineChartItem[] = [];
+  @Input() benchmarkDataItems: NullableLineChartItem[] = [];
   @Input() benchmarkLabel = '';
   @Input() colorScheme?: ColorScheme;
-  @Input() currency: string;
+  @Input() currency?: string;
   @Input() historicalDataItems: LineChartItem[];
   @Input() isAnimated = false;
   @Input() label: string;
@@ -134,12 +138,12 @@ export class GfLineChartComponent
 
   private initialize() {
     this.isLoading = true;
-    const benchmarkPrices: number[] = [];
+    const benchmarkPrices: (number | null)[] = [];
     const labels: string[] = [];
     const marketPrices: number[] = [];
 
     this.historicalDataItems?.forEach((historicalDataItem, index) => {
-      benchmarkPrices.push(this.benchmarkDataItems?.[index]?.value);
+      benchmarkPrices.push(this.benchmarkDataItems?.[index]?.value ?? null);
       labels.push(historicalDataItem.date);
       marketPrices.push(historicalDataItem.value);
     });
@@ -164,7 +168,7 @@ export class GfLineChartComponent
       gradient.addColorStop(1, getBackgroundColor(this.colorScheme));
     }
 
-    const data = {
+    const data: ChartData<'line'> = {
       labels,
       datasets: [
         {
@@ -205,7 +209,7 @@ export class GfLineChartComponent
 
         this.chart.update();
       } else {
-        this.chart = new Chart(this.chartCanvas.nativeElement, {
+        this.chart = new Chart<'line'>(this.chartCanvas.nativeElement, {
           data,
           options: {
             animations: this.isAnimated ? animations : undefined,