diff --git a/web/src/app/test/page.tsx b/web/src/app/test/page.tsx
index 17810fb8d..e1a7704b1 100644
--- a/web/src/app/test/page.tsx
+++ b/web/src/app/test/page.tsx
@@ -25,9 +25,9 @@ export default function TestPage() {
     <div className="flex h-screen w-screen items-center justify-center">
       <BusterChart
         data={[
-          { segment: 'A', value1: 30, value2: 45 },
-          { segment: 'B', value1: 20, value2: 25 },
-          { segment: 'C', value1: 50, value2: 30 }
+          { segment: 'A', value1: 302323, value2: 45 },
+          { segment: 'B', value1: 20340, value2: 25 },
+          { segment: 'C', value1: 5777770, value2: 30 }
         ]}
         selectedChartType={ChartType.Pie}
         pieChartAxis={{
diff --git a/web/src/components/ui/charts/BusterChartJS/hooks/useChartSpecificOptions/pieChartOptions.ts b/web/src/components/ui/charts/BusterChartJS/hooks/useChartSpecificOptions/pieChartOptions.ts
index 008b42a65..b54816eb8 100644
--- a/web/src/components/ui/charts/BusterChartJS/hooks/useChartSpecificOptions/pieChartOptions.ts
+++ b/web/src/components/ui/charts/BusterChartJS/hooks/useChartSpecificOptions/pieChartOptions.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import type { ChartProps } from '../../core';
 import type { ChartSpecificOptionsProps } from './interfaces';
 import type { ChartType as ChartJSChartType } from 'chart.js';
@@ -40,6 +42,13 @@ export const piePluginsHandler = ({
 }: ChartSpecificOptionsProps): DeepPartial<PluginChartOptions<ChartJSChartType>>['plugins'] => {
   let returnValue: DeepPartial<PluginChartOptions<ChartJSChartType>>['plugins'] = {};
 
+  const titleColor = getComputedStyle(document.documentElement).getPropertyValue(
+    '--color-text-secondary'
+  );
+  const valueColor = getComputedStyle(document.documentElement).getPropertyValue(
+    '--color-text-default'
+  );
+
   if (pieShowInnerLabel && pieDonutWidth !== 0) {
     const annotation: AnnotationPluginOptions = {
       annotations: {
@@ -61,8 +70,14 @@ export const piePluginsHandler = ({
               )
             ];
           },
-          font: [{ size: 14 }, { size: 22 }],
-          color: ['var(--color-text-tertiary)', 'var(--color-text-default)']
+          font: ({ chart }) => {
+            const minDimension = Math.min(chart.width, chart.height);
+            return [
+              { size: Math.max(20, minDimension * 0.02) }, // title font
+              { size: Math.max(42, minDimension * 0.042) } // value font
+            ];
+          },
+          color: [titleColor, valueColor]
         }
       }
     };