diff --git a/components/prose/Chart.global.vue b/components/prose/Chart.global.vue
index 9372995383ece1ed73ea75892180ad9dcf5f9958..2b815eb790785f266aea2ad4d11df70361bfbac2 100644
--- a/components/prose/Chart.global.vue
+++ b/components/prose/Chart.global.vue
@@ -5,6 +5,8 @@
 </template>
 <script setup>
 import { Chart } from 'chart.js/auto';
+const colorMode = useColorMode()
+
 const props = defineProps({
     type: {
         type: String,
@@ -23,18 +25,27 @@ const props = defineProps({
         default: () => []
     }
 })
+let chart
 onMounted(() => {
-    new Chart(document.getElementById('chart'), {
+    chart = new Chart(document.getElementById('chart'), {
         type: props.type,
         data: {
             labels: props.labels,
-            datasets: [
-                {
-                    label: props.title,
-                    data: props.data
+            datasets: props.data
+        },
+        options: {
+            plugins: {
+                title: {
+                    display: true,
+                    text: props.title,
                 }
-            ]
+            }
         }
     })
 })
+watch(()=> colorMode.value, (value) => {
+    let color = '#e5e7eb'
+    if (value === 'dark') color = '#1f2937'
+    Chart.defaults.borderColor = color
+}, { immediate: true, deep: true })
 </script>
diff --git a/pages/mdc.vue b/pages/mdc.vue
index c3fc47654f21d6f06d0640535c0719c95a5e492b..4c6bbba35be208bbdce308479a4d914252d9cd25 100644
--- a/pages/mdc.vue
+++ b/pages/mdc.vue
@@ -5,6 +5,6 @@
 </template>
 <script setup>
 const mdStr = `
-::ProseChart{title='langchain-ai/langchain [2023-06-05,2024-06-04] Star Data' :labels='["2023-06-05","2023-06-12"]' :data='[43071,44946]'}
+::ProseChart{type='line' title='langchain-ai/langchain [2023-06-05,2024-06-04] Star Data' :labels='["2023-06-05","2023-06-12"]' :data='[{"label": "star数量", "data": [43071,44946]}]' }
 `
 </script>
\ No newline at end of file