diff --git a/apps/client/src/app/app.component.ts b/apps/client/src/app/app.component.ts
index 0a9be3a75..e1967970d 100644
--- a/apps/client/src/app/app.component.ts
+++ b/apps/client/src/app/app.component.ts
@@ -28,6 +28,7 @@ import {
   RouterOutlet
 } from '@angular/router';
 import { DataSource } from '@prisma/client';
+import { Chart } from 'chart.js';
 import { addIcons } from 'ionicons';
 import { openOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
@@ -255,6 +256,9 @@ export class GfAppComponent implements OnInit {
 
     this.toggleTheme(isDarkTheme);
 
+    // Default chart styles
+    Chart.defaults.font.family = getCssVariable('--font-family-sans-serif');
+
     window.matchMedia('(prefers-color-scheme: dark)').addListener((event) => {
       if (!this.user?.settings.colorScheme) {
         this.toggleTheme(event.matches);