diff --git a/apps/web/src/components/ui/charts/BusterChartJS/ChartJSTheme.ts b/apps/web/src/components/ui/charts/BusterChartJS/ChartJSTheme.ts
index 2c7ac257e..87b213b11 100644
--- a/apps/web/src/components/ui/charts/BusterChartJS/ChartJSTheme.ts
+++ b/apps/web/src/components/ui/charts/BusterChartJS/ChartJSTheme.ts
@@ -34,17 +34,17 @@ import './core/plugins/chartjs-plugin-dayjs';
 import './core/plugins/chartjs-scale-tick-duplicate';
 import './core/plugins/chartjs-plugin-trendlines';
 
-const fontFamily = isServer
+const chartJSThemefontFamily = isServer
   ? 'Roobert_Pro'
   : getComputedStyle(document.documentElement).getPropertyValue('--font-sans');
-const color = isServer
+const chartJSThemecolor = isServer
   ? '#575859'
   : getComputedStyle(document.documentElement).getPropertyValue('--color-text-secondary');
-const backgroundColor = isServer
+const chartJSThemebackgroundColor = isServer
   ? '#ffffff'
   : getComputedStyle(document.documentElement).getPropertyValue('--color-background');
 
-console.log('backgroundColor', backgroundColor);
+console.log('chartJSThemebackgroundColor', chartJSThemebackgroundColor);
 
 ChartJS.register(
   LineController,
@@ -81,11 +81,11 @@ ChartJS.defaults.responsive = true;
 ChartJS.defaults.clip = false;
 ChartJS.defaults.resizeDelay = 7;
 ChartJS.defaults.maintainAspectRatio = false;
-ChartJS.defaults.color = color;
+ChartJS.defaults.color = chartJSThemecolor;
 ChartJS.defaults.backgroundColor = DEFAULT_CHART_THEME;
 ChartJS.defaults.font = {
   ...ChartJS.defaults.font,
-  family: fontFamily,
+  family: chartJSThemefontFamily,
   size: 11,
   weight: 'normal'
 };
@@ -114,7 +114,7 @@ ChartJS.defaults.font = {
   scale.ticks.showLabelBackdrop = true;
   scale.ticks.z = 10;
   scale.ticks.includeBounds = true;
-  scale.ticks.backdropColor = backgroundColor;
+  scale.ticks.backdropColor = chartJSThemebackgroundColor;
   scale.ticks.autoSkipPadding = 4;
   scale.ticks.align = 'center';
   scale.ticks.callback = function (value, index, values) {
@@ -128,7 +128,7 @@ for (const scale of [
   ChartJS.defaults.scales.logarithmic
 ]) {
   scale.ticks.z = 0; //this used to be a 100, but I changed it for datalabels sake
-  scale.ticks.backdropColor = backgroundColor;
+  scale.ticks.backdropColor = chartJSThemebackgroundColor;
   scale.ticks.showLabelBackdrop = true;
   scale.ticks.autoSkipPadding = 2;
 }
@@ -162,7 +162,7 @@ ChartJS.defaults.plugins = {
     font: {
       weight: 'normal',
       size: 10,
-      family: fontFamily
+      family: chartJSThemefontFamily
     }
   },
   tooltipHoverBar: {
diff --git a/apps/web/src/components/ui/charts/BusterChartJS/hooks/useChartSpecificOptions/labelOptionConfig.ts b/apps/web/src/components/ui/charts/BusterChartJS/hooks/useChartSpecificOptions/labelOptionConfig.ts
index 596107832..fa86a37d2 100644
--- a/apps/web/src/components/ui/charts/BusterChartJS/hooks/useChartSpecificOptions/labelOptionConfig.ts
+++ b/apps/web/src/components/ui/charts/BusterChartJS/hooks/useChartSpecificOptions/labelOptionConfig.ts
@@ -3,22 +3,14 @@
 import { isServer } from '@tanstack/react-query';
 import type { ChartProps } from '../../core';
 
-const backgroundColor = isServer
-  ? '#e6e6e6'
-  : getComputedStyle(document.documentElement).getPropertyValue('--color-page-background');
-
-const borderColor = isServer
-  ? '#e0e0e0'
-  : getComputedStyle(document.documentElement).getPropertyValue('--color-border');
-
-const textColor = isServer
-  ? '#575859'
-  : getComputedStyle(document.documentElement).getPropertyValue('--color-text-secondary');
-
 export const defaultLabelOptionConfig = {
-  backgroundColor: backgroundColor,
+  backgroundColor: isServer
+    ? '#e6e6e6'
+    : getComputedStyle(document.documentElement).getPropertyValue('--color-page-background'),
   borderWidth: 0.5,
-  borderColor: borderColor,
+  borderColor: isServer
+    ? '#e0e0e0'
+    : getComputedStyle(document.documentElement).getPropertyValue('--color-border'),
   borderRadius: 6,
   padding: {
     top: 3,
@@ -26,7 +18,9 @@ export const defaultLabelOptionConfig = {
     left: 6,
     right: 6
   },
-  color: textColor,
+  color: isServer
+    ? '#575859'
+    : getComputedStyle(document.documentElement).getPropertyValue('--color-text-secondary'),
   font: {
     size: 10,
     weight: 'normal' as const