diff --git a/doc/chart/ComboDoc.vue b/doc/chart/ComboDoc.vue
index 9e75db236..a1133bf26 100644
--- a/doc/chart/ComboDoc.vue
+++ b/doc/chart/ComboDoc.vue
@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
+
 export default {
     data() {
         return {
@@ -204,6 +206,12 @@ const setChartOptions = () => {
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
+
+        this.themeChangeListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-change-complete', this.themeChangeListener);
     },
     methods: {
         setChartData() {
diff --git a/doc/chart/DoughnutDoc.vue b/doc/chart/DoughnutDoc.vue
index 66945b26f..ba6b87a3f 100644
--- a/doc/chart/DoughnutDoc.vue
+++ b/doc/chart/DoughnutDoc.vue
@@ -9,13 +9,13 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
+
 export default {
     data() {
         return {
             chartData: null,
-            chartOptions: {
-                cutout: '60%'
-            },
+            chartOptions: null,
             code: {
                 basic: `
 <Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
@@ -99,10 +99,17 @@ const setChartData = () => {
     },
     mounted() {
         this.chartData = this.setChartData();
+        this.chartOptions = this.setChartOptions();
+
+        this.themeChangeListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-change-complete', this.themeChangeListener);
     },
     methods: {
         setChartData() {
-            const documentStyle = getComputedStyle(document.body);
+            const documentStyle = getComputedStyle(document.documentElement);
 
             return {
                 labels: ['A', 'B', 'C'],
@@ -114,6 +121,21 @@ const setChartData = () => {
                     }
                 ]
             };
+        },
+        setChartOptions() {
+            const documentStyle = getComputedStyle(document.documentElement);
+            const textColor = documentStyle.getPropertyValue('--text-color');
+
+            return {
+                plugins: {
+                    legend: {
+                        labels: {
+                            cutout: '60%',
+                            color: textColor
+                        }
+                    }
+                }
+            };
         }
     }
 };
diff --git a/doc/chart/HorizontalBarDoc.vue b/doc/chart/HorizontalBarDoc.vue
index cb1976a87..00c625ab9 100644
--- a/doc/chart/HorizontalBarDoc.vue
+++ b/doc/chart/HorizontalBarDoc.vue
@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
+
 export default {
     data() {
         return {
@@ -194,6 +196,12 @@ const setChartOptions = () => {
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
+
+        this.themeChangeListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-change-complete', this.themeChangeListener);
     },
     methods: {
         setChartData() {
@@ -230,7 +238,7 @@ const setChartOptions = () => {
                 plugins: {
                     legend: {
                         labels: {
-                            fontColor: textColor
+                            color: textColor
                         }
                     }
                 },
diff --git a/doc/chart/LineDoc.vue b/doc/chart/LineDoc.vue
index a6006e8eb..c360f2ad4 100644
--- a/doc/chart/LineDoc.vue
+++ b/doc/chart/LineDoc.vue
@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
+
 export default {
     data() {
         return {
@@ -186,6 +188,12 @@ const setChartOptions = () => {
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
+
+        this.themeChangeListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-change-complete', this.themeChangeListener);
     },
     methods: {
         setChartData() {
diff --git a/doc/chart/LineStylesDoc.vue b/doc/chart/LineStylesDoc.vue
index 96eb244ce..9d6888ce1 100644
--- a/doc/chart/LineStylesDoc.vue
+++ b/doc/chart/LineStylesDoc.vue
@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
+
 export default {
     data() {
         return {
@@ -204,6 +206,12 @@ const setChartOptions = () => {
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
+
+        this.themeChangeListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-change-complete', this.themeChangeListener);
     },
     methods: {
         setChartData() {
diff --git a/doc/chart/MultiAxisDoc.vue b/doc/chart/MultiAxisDoc.vue
index 187d0f8c0..71308d1e2 100644
--- a/doc/chart/MultiAxisDoc.vue
+++ b/doc/chart/MultiAxisDoc.vue
@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
+
 export default {
     data() {
         return {
@@ -222,6 +224,12 @@ const setChartOptions = () => {
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
+
+        this.themeChangeListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-change-complete', this.themeChangeListener);
     },
     methods: {
         setChartData() {
diff --git a/doc/chart/PieChartDoc.vue b/doc/chart/PieChartDoc.vue
index 495a07b7d..cead9e0f9 100644
--- a/doc/chart/PieChartDoc.vue
+++ b/doc/chart/PieChartDoc.vue
@@ -9,19 +9,13 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
+
 export default {
     data() {
         return {
             chartData: null,
-            chartOptions: {
-                plugins: {
-                    legend: {
-                        labels: {
-                            usePointStyle: true
-                        }
-                    }
-                }
-            },
+            chartOptions: null,
             code: {
                 basic: `
 <Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
@@ -117,10 +111,17 @@ const setChartData = () => {
     },
     mounted() {
         this.chartData = this.setChartData();
+        this.chartOptions = this.setChartOptions();
+
+        this.themeChangeListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-change-complete', this.themeChangeListener);
     },
     methods: {
         setChartData() {
-            const documentStyle = getComputedStyle(document.body);
+            const documentStyle = getComputedStyle(document.documentElement);
 
             return {
                 labels: ['A', 'B', 'C'],
@@ -132,6 +133,21 @@ const setChartData = () => {
                     }
                 ]
             };
+        },
+        setChartOptions() {
+            const documentStyle = getComputedStyle(document.documentElement);
+            const textColor = documentStyle.getPropertyValue('--text-color');
+
+            return {
+                plugins: {
+                    legend: {
+                        labels: {
+                            usePointStyle: true,
+                            color: textColor
+                        }
+                    }
+                }
+            };
         }
     }
 };
diff --git a/doc/chart/PolarAreaDoc.vue b/doc/chart/PolarAreaDoc.vue
index e7ff2a161..d5f87083c 100644
--- a/doc/chart/PolarAreaDoc.vue
+++ b/doc/chart/PolarAreaDoc.vue
@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
+
 export default {
     data() {
         return {
@@ -152,6 +154,12 @@ const setChartOptions = () => {
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
+
+        this.themeChangeListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-change-complete', this.themeChangeListener);
     },
     methods: {
         setChartData() {
diff --git a/doc/chart/RadarDoc.vue b/doc/chart/RadarDoc.vue
index 77d6580fc..b3ca6ff15 100644
--- a/doc/chart/RadarDoc.vue
+++ b/doc/chart/RadarDoc.vue
@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
+
 export default {
     data() {
         return {
@@ -168,6 +170,12 @@ const setChartOptions = () => {
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
+
+        this.themeChangeListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-change-complete', this.themeChangeListener);
     },
     methods: {
         setChartData() {
diff --git a/doc/chart/StackedBarDoc.vue b/doc/chart/StackedBarDoc.vue
index d1f6d3693..7079d4004 100644
--- a/doc/chart/StackedBarDoc.vue
+++ b/doc/chart/StackedBarDoc.vue
@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
+
 export default {
     data() {
         return {
@@ -206,6 +208,12 @@ const setChartOptions = () =>  {
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
+
+        this.themeChangeListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-change-complete', this.themeChangeListener);
     },
     methods: {
         setChartData() {
diff --git a/doc/chart/VerticalBarDoc.vue b/doc/chart/VerticalBarDoc.vue
index dc856443e..72f9bca95 100644
--- a/doc/chart/VerticalBarDoc.vue
+++ b/doc/chart/VerticalBarDoc.vue
@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
+
 export default {
     data() {
         return {
@@ -192,6 +194,12 @@ const setChartOptions = () => {
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
+
+        this.themeChangeListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-change-complete', this.themeChangeListener);
     },
     methods: {
         setChartData() {
@@ -227,7 +235,7 @@ const setChartOptions = () => {
                 plugins: {
                     legend: {
                         labels: {
-                            fontColor: textColor
+                            color: textColor
                         }
                     }
                 },