update colors

web/src/components/ui/charts/BusterChartJS/core/plugins/chartjs-plugin-hover-scatter.tsx

@@ -1,4 +1,4 @@
-import { ChartType, Chart, Plugin } from 'chart.js';
+import { ChartType, Plugin } from 'chart.js';
 
 export interface ChartHoverScatterPluginOptions {
   color?: string;

web/src/components/ui/charts/BusterChartJS/hooks/useChartSpecificOptions/labelOptionConfig.ts

@@ -1,7 +1,23 @@
+'use client';
+
+import { isServer } from '@tanstack/react-query';
+
+const backgroundColor = isServer
+  ? '#e6e6e6'
+  : getComputedStyle(document.documentElement).getPropertyValue('--color-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: 'var(--color-disabled)',
+  backgroundColor: backgroundColor,
   borderWidth: 0.5,
-  borderColor: 'var(--color-border)',
+  borderColor: borderColor,
   borderRadius: 6,
   padding: {
     top: 3,
@@ -9,7 +25,7 @@ export const defaultLabelOptionConfig = {
     left: 6,
     right: 6
   },
-  color: 'var(--color-text-secondary)',
+  color: textColor,
   font: {
     size: 10,
     weight: 'normal' as const

web/src/components/ui/charts/BusterChartJS/hooks/useSeriesOptions/barSeriesBuilder.ts

@@ -29,6 +29,8 @@ export const barSeriesBuilder = ({
 
     let hasBeenDrawn = false;
 
+    console.log(hasBeenDrawn, defaultLabelOptionConfig);
+
     dataLabelOptions.stackTotal = {
       display: function (context) {
         const shownDatasets = context.chart.data.datasets.filter(