diff --git a/src/components/charts/DonutChart.vue b/src/components/charts/DonutChart.vue
index 83572dc2..5ac20c2d 100644
--- a/src/components/charts/DonutChart.vue
+++ b/src/components/charts/DonutChart.vue
@@ -9,22 +9,22 @@ const props = defineProps(['series', 'labels']);
 const baseStore = useBaseStore();
 
 const expenseRationChartConfig = computed(() => {
-    const theme = baseStore.theme;
-    getDonutChartConfig(theme, props?.labels);
+  const theme = baseStore.theme;
+  return getDonutChartConfig(theme, props?.labels);
 });
 </script>
 
 <template>
-    <ApexCharts
-        type="donut"
-        height="410"
-        :options="expenseRationChartConfig"
-        :series="series"
-    />
+  <ApexCharts
+    type="donut"
+    height="410"
+    :options="expenseRationChartConfig"
+    :series="series"
+  />
 </template>
 
 <script lang="ts">
 export default {
-    name: 'DonetChart',
+  name: 'DonetChart',
 };
 </script>
diff --git a/src/components/charts/apexChartConfig.ts b/src/components/charts/apexChartConfig.ts
index 70f55bc1..c219ea83 100644
--- a/src/components/charts/apexChartConfig.ts
+++ b/src/components/charts/apexChartConfig.ts
@@ -166,7 +166,7 @@ const themeColors = (theme: string) => {
   };
 };
 // 👉 Colors variables
-const colorVariables = (theme: string) => {
+export const colorVariables = (theme: string) => {
   if (theme === 'light') {
     return {
       themeSecondaryTextColor: 'rgba(76,78,100,0.6)',