diff --git a/components/prose/LineChart.global.vue b/components/prose/Chart.global.vue
similarity index 74%
rename from components/prose/LineChart.global.vue
rename to components/prose/Chart.global.vue
index a9ac5c1a6b031fc3ad6056439512f90216c7204b..9372995383ece1ed73ea75892180ad9dcf5f9958 100644
--- a/components/prose/LineChart.global.vue
+++ b/components/prose/Chart.global.vue
@@ -1,11 +1,15 @@
 <template>
-    <div class="w-full">
-        <canvas id="chart"></canvas>
+    <div class="w-full relative" style="aspect-ratio: 2/1">
+        <canvas id="chart" :aria-label="title"></canvas>
     </div>
 </template>
 <script setup>
 import { Chart } from 'chart.js/auto';
 const props = defineProps({
+    type: {
+        type: String,
+        default: 'line'
+    },
     title: {
         type: String,
         default: ''
@@ -21,7 +25,7 @@ const props = defineProps({
 })
 onMounted(() => {
     new Chart(document.getElementById('chart'), {
-        type: 'line',
+        type: props.type,
         data: {
             labels: props.labels,
             datasets: [
diff --git a/pages/mdc.vue b/pages/mdc.vue
index 0c8184d977679f2bece054849d4d24409b33ef84..c3fc47654f21d6f06d0640535c0719c95a5e492b 100644
--- a/pages/mdc.vue
+++ b/pages/mdc.vue
@@ -1,8 +1,10 @@
 <template>
-    <IMdMdc :content="mdStr"/>
+    <div class="w-full p-6">
+        <IMdMdc :content="mdStr"/>
+    </div>
 </template>
 <script setup>
 const mdStr = `
-::ProseLineChart{title='langchain-ai/langchain [2023-06-05,2024-06-04] Star Data' :labels='["2023-06-05","2023-06-12"]' :data='[43071,44946]'}
+::ProseChart{title='langchain-ai/langchain [2023-06-05,2024-06-04] Star Data' :labels='["2023-06-05","2023-06-12"]' :data='[43071,44946]'}
 `
 </script>
\ No newline at end of file