diff --git a/components/prose/Chart.global.vue b/components/prose/Chart.global.vue
index 2b815eb790785f266aea2ad4d11df70361bfbac2..e9bb55509ec3e8707ba0dbe0c114b757b8a2f34e 100644
--- a/components/prose/Chart.global.vue
+++ b/components/prose/Chart.global.vue
@@ -26,7 +26,7 @@ const props = defineProps({
     }
 })
 let chart
-onMounted(() => {
+function init () {
     chart = new Chart(document.getElementById('chart'), {
         type: props.type,
         data: {
@@ -42,10 +42,23 @@ onMounted(() => {
             }
         }
     })
+}
+function destroy () {
+    if (chart) chart.destroy()
+}
+onMounted(() => {
+    init()
+})
+onBeforeUnmount(() => {
+    destroy()
 })
 watch(()=> colorMode.value, (value) => {
     let color = '#e5e7eb'
     if (value === 'dark') color = '#1f2937'
     Chart.defaults.borderColor = color
+    if (chart) {
+        destroy()
+        init()
+    }
 }, { immediate: true, deep: true })
 </script>