diff --git a/app.vue b/app.vue
index d1525c4c7..5a1e520f8 100644
--- a/app.vue
+++ b/app.vue
@@ -32,6 +32,7 @@ export default {
             this.$primevue.changeTheme(this.$appState.theme, event.theme, 'theme-link', () => {
                 this.$appState.theme = event.theme;
                 this.$appState.darkTheme = event.dark;
+                EventBus.emit('theme-change-complete', { theme: event.theme, dark: event.dark });
             });
         };
 
diff --git a/doc/chart/BasicDoc.vue b/doc/chart/BasicDoc.vue
index 36f3b7a1e..b5f0b8aa9 100644
--- a/doc/chart/BasicDoc.vue
+++ b/doc/chart/BasicDoc.vue
@@ -12,7 +12,10 @@
 </template>
 
 <script>
+import EventBus from '@/layouts/AppEventBus';
+
 export default {
+    themeChangeListener: null,
     data() {
         return {
             chartData: null,
@@ -163,9 +166,18 @@ const setChartOptions = () => {
             }
         };
     },
+    beforeUnmount() {
+        EventBus.off('theme-change-complete', this.themeChangeListener);
+    },
     mounted() {
         this.chartData = this.setChartData();
         this.chartOptions = this.setChartOptions();
+
+        this.themeChangeListener = () => {
+            this.chartOptions = this.setChartOptions();
+        };
+
+        EventBus.on('theme-change-complete', this.themeChangeListener);
     },
     methods: {
         setChartData() {