diff --git a/frontend_nuxt/pages/about/stats.vue b/frontend_nuxt/pages/about/stats.vue
index 7b881d67d..331680de1 100644
--- a/frontend_nuxt/pages/about/stats.vue
+++ b/frontend_nuxt/pages/about/stats.vue
@@ -33,23 +33,11 @@
 </template>
 
 <script setup>
-import { LineChart } from 'echarts/charts'
-import {
-  DataZoomComponent,
-  GridComponent,
-  TitleComponent,
-  TooltipComponent,
-} from 'echarts/components'
-import { use } from 'echarts/core'
-import { CanvasRenderer } from 'echarts/renderers'
 import { onMounted, ref } from 'vue'
-import VChart from 'vue-echarts'
 import { getToken } from '~/utils/auth'
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 
-use([LineChart, TitleComponent, TooltipComponent, GridComponent, DataZoomComponent, CanvasRenderer])
-
 const dauOption = ref(null)
 const newUserOption = ref(null)
 const postOption = ref(null)
diff --git a/frontend_nuxt/pages/points.vue b/frontend_nuxt/pages/points.vue
index 946df8be9..68cb5f22d 100644
--- a/frontend_nuxt/pages/points.vue
+++ b/frontend_nuxt/pages/points.vue
@@ -185,13 +185,6 @@ import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import { stripMarkdownLength } from '~/utils/markdown'
 import TimeManager from '~/utils/time'
 import BaseTabs from '~/components/BaseTabs.vue'
-import { LineChart } from 'echarts/charts'
-import { GridComponent, TooltipComponent } from 'echarts/components'
-import { use } from 'echarts/core'
-import { CanvasRenderer } from 'echarts/renderers'
-import VChart from 'vue-echarts'
-
-use([LineChart, GridComponent, TooltipComponent, CanvasRenderer])
 
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
@@ -248,9 +241,10 @@ const loadTrend = async () => {
     const values = data.map((d) => d.value)
     trendOption.value = {
       tooltip: { trigger: 'axis' },
-      xAxis: { type: 'category', data: dates },
+      xAxis: { type: 'category', data: dates, boundaryGap: false },
       yAxis: { type: 'value' },
       series: [{ type: 'line', areaStyle: {}, smooth: true, data: values }],
+      dataZoom: [{ type: 'slider', start: 80 }, { type: 'inside' }],
     }
   }
 }
diff --git a/frontend_nuxt/plugins/echarts.client.ts b/frontend_nuxt/plugins/echarts.client.ts
new file mode 100644
index 000000000..4b5a30724
--- /dev/null
+++ b/frontend_nuxt/plugins/echarts.client.ts
@@ -0,0 +1,18 @@
+// plugins/echarts.client.ts
+import { defineNuxtPlugin } from 'nuxt/app'
+import VueECharts from 'vue-echarts'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { LineChart } from 'echarts/charts'
+import {
+  GridComponent,
+  TooltipComponent,
+  DataZoomComponent,
+  TitleComponent,
+} from 'echarts/components'
+
+use([LineChart, TitleComponent, TooltipComponent, GridComponent, DataZoomComponent, CanvasRenderer])
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.component('VChart', VueECharts)
+})