diff --git a/src/main.ts b/src/main.ts
index 912e97e..afa4b8b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,22 +2,6 @@ import { addAPIProvider } from "@iconify/vue"
 import { createPinia } from "pinia"
 import { createRouter, createWebHistory } from "vue-router"
 
-import {
-  ArcElement,
-  BarElement,
-  BarController,
-  CategoryScale,
-  Chart as ChartJS,
-  Colors,
-  Legend,
-  LinearScale,
-  LineController,
-  Title,
-  Tooltip,
-  LineElement,
-  PointElement,
-} from "chart.js"
-
 import { STORAGE_KEY } from "utils/constants"
 import storage from "utils/storage"
 
@@ -82,21 +66,6 @@ router.beforeEach(async (to, from, next) => {
   next()
 })
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  BarController,
-  ArcElement,
-  LineElement,
-  LineController,
-  PointElement,
-  Colors,
-  Title,
-  Tooltip,
-  Legend,
-)
-
 const pinia = createPinia()
 const app = createApp(App)
 app.use(router)
diff --git a/src/oj/problem/components/ProblemInfo.vue b/src/oj/problem/components/ProblemInfo.vue
index ce42269..9e6257b 100644
--- a/src/oj/problem/components/ProblemInfo.vue
+++ b/src/oj/problem/components/ProblemInfo.vue
@@ -6,6 +6,7 @@ import { getACRateNumber, getTagColor, parseTime } from "utils/functions"
 import { Pie } from "vue-chartjs"
 import { getProblemBeatRate } from "~/oj/api"
 import { isDesktop } from "~/shared/composables/breakpoints"
+import { registerChart } from "~/utils/registerChart"
 
 const beatRate = ref("0")
 
@@ -73,6 +74,7 @@ async function getBeatRate() {
   beatRate.value = res.data
 }
 
+onBeforeMount(registerChart)
 onMounted(getBeatRate)
 </script>
 
diff --git a/src/routes.ts b/src/routes.ts
index 9d7d1b9..bbf3be1 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -1,4 +1,5 @@
 import { RouteRecordRaw } from "vue-router"
+import { registerChart } from "./utils/registerChart"
 
 export const ojs: RouteRecordRaw = {
   path: "/",
@@ -65,6 +66,7 @@ export const ojs: RouteRecordRaw = {
     {
       path: "rank",
       component: () => import("oj/rank/list.vue"),
+      beforeEnter: registerChart,
     },
     {
       path: "announcement",
@@ -95,6 +97,7 @@ export const ojs: RouteRecordRaw = {
       path: "ai-analysis",
       component: () => import("oj/ai/analysis.vue"),
       meta: { requiresAuth: true },
+      beforeEnter: registerChart,
     },
   ],
 }
diff --git a/src/utils/registerChart.ts b/src/utils/registerChart.ts
new file mode 100644
index 0000000..d59a1bf
--- /dev/null
+++ b/src/utils/registerChart.ts
@@ -0,0 +1,36 @@
+import {
+  ArcElement,
+  BarElement,
+  BarController,
+  CategoryScale,
+  Chart as ChartJS,
+  Colors,
+  Legend,
+  LinearScale,
+  LineController,
+  Title,
+  Tooltip,
+  LineElement,
+  PointElement,
+} from "chart.js"
+
+let registered = false
+
+export function registerChart() {
+  if (registered) return
+  ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    BarController,
+    ArcElement,
+    LineElement,
+    LineController,
+    PointElement,
+    Colors,
+    Title,
+    Tooltip,
+    Legend,
+  )
+  registered = true
+}