From 3843f22d953c02c5fa8b3d2c94c65485d0a35a7c Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Sat, 31 Jan 2026 12:32:34 +0700
Subject: [PATCH] fix(lib): refine Chart.js tooltip type definitions in line
 and treemap charts

---
 libs/ui/src/lib/line-chart/line-chart.component.ts  |  9 +++------
 .../lib/treemap-chart/treemap-chart.component.ts    | 13 +++++++++----
 2 files changed, 12 insertions(+), 10 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 b2c6ef8f8..d2425da51 100644
--- a/libs/ui/src/lib/line-chart/line-chart.component.ts
+++ b/libs/ui/src/lib/line-chart/line-chart.component.ts
@@ -26,7 +26,6 @@ import {
 } from '@angular/core';
 import {
   Chart,
-  ChartTypeRegistry,
   Filler,
   LinearScale,
   LineController,
@@ -34,8 +33,8 @@ import {
   PointElement,
   TimeScale,
   Tooltip,
-  TooltipOptions,
-  TooltipPosition
+  type TooltipOptions,
+  type TooltipPosition
 } from 'chart.js';
 import 'chartjs-adapter-date-fns';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@@ -320,9 +319,7 @@ export class GfLineChartComponent
     };
   }
 
-  private getTooltipPluginConfiguration<
-    T extends keyof ChartTypeRegistry
-  >(): Partial<TooltipOptions<T>> {
+  private getTooltipPluginConfiguration(): Partial<TooltipOptions<'line'>> {
     return {
       ...getTooltipOptions({
         colorScheme: this.colorScheme,
diff --git a/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts b/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts
index 6ae958b83..f6d7048f5 100644
--- a/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts
+++ b/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts
@@ -25,7 +25,7 @@ import {
 } from '@angular/core';
 import { DataSource } from '@prisma/client';
 import { Big } from 'big.js';
-import { ChartConfiguration } from 'chart.js';
+import type { ChartConfiguration, TooltipOptions } from 'chart.js';
 import { LinearScale } from 'chart.js';
 import { Chart, Tooltip } from 'chart.js';
 import { TreemapController, TreemapElement } from 'chartjs-chart-treemap';
@@ -294,8 +294,13 @@ export class GfTreemapChartComponent
     if (this.chartCanvas) {
       if (this.chart) {
         this.chart.data = data;
+
+        if (!this.chart.options.plugins) {
+          this.chart.options.plugins = {};
+        }
+
         this.chart.options.plugins.tooltip =
-          this.getTooltipPluginConfiguration() as unknown;
+          this.getTooltipPluginConfiguration();
         this.chart.update();
       } else {
         this.chart = new Chart(this.chartCanvas.nativeElement, {
@@ -329,7 +334,7 @@ export class GfTreemapChartComponent
             plugins: {
               tooltip: this.getTooltipPluginConfiguration()
             }
-          } as unknown,
+          },
           type: 'treemap'
         });
       }
@@ -338,7 +343,7 @@ export class GfTreemapChartComponent
     this.isLoading = false;
   }
 
-  private getTooltipPluginConfiguration() {
+  private getTooltipPluginConfiguration(): Partial<TooltipOptions<'treemap'>> {
     return {
       ...getTooltipOptions({
         colorScheme: this.colorScheme,