Replace react-chartjs-2 with custom ChartWrapper component

client/package.json

@@ -19,7 +19,6 @@
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-http-backend": "^3.0.2",
     "react": "^19.2.3",
-    "react-chartjs-2": "^5.3.1",
     "react-dom": "^19.2.3",
     "react-i18next": "^16.5.3",
     "react-router-dom": "^7.12.0",

client/src/common/components/ChartWrapper.jsx

@@ -0,0 +1,32 @@
+import {useRef, useEffect, useState} from "react";
+import {Chart} from "chart.js";
+import "../utils/chartConfig";
+
+export default function ChartWrapper({type, data, options}) {
+    const canvasRef = useRef(null);
+    const chartRef = useRef(null);
+    const [ready, setReady] = useState(false);
+
+    useEffect(() => {
+        const timer = setTimeout(() => setReady(true), 0);
+        return () => clearTimeout(timer);
+    }, []);
+
+    useEffect(() => {
+        if (!ready || !canvasRef.current) return;
+        if (!chartRef.current) {
+            chartRef.current = new Chart(canvasRef.current, {type, data, options});
+        } else {
+            chartRef.current.data = data;
+            chartRef.current.options = options;
+            chartRef.current.update("none");
+        }
+    }, [ready, type, data, options]);
+
+    useEffect(() => () => {
+        chartRef.current?.destroy();
+        chartRef.current = null;
+    }, []);
+
+    return <canvas ref={canvasRef}/>;
+}

client/src/common/utils/chartConfig.js

@@ -0,0 +1,30 @@
+import {
+    Chart,
+    LineController,
+    BarController,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    BarElement,
+    Title,
+    Tooltip,
+    Legend,
+    Filler
+} from 'chart.js';
+
+Chart.register(
+    LineController,
+    BarController,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    BarElement,
+    Title,
+    Tooltip,
+    Legend,
+    Filler
+);
+
+export { Chart };

client/src/pages/Statistics/charts/HourlyChart.jsx

@@ -1,4 +1,4 @@
-import { Bar } from "react-chartjs-2";
+import ChartWrapper from "@/common/components/ChartWrapper";
 import { useMemo, useContext, memo } from "react";
 import { t } from "i18next";
 import { ThemeContext } from "@/common/contexts/Theme";
@@ -141,7 +141,7 @@ const HourlyChart = memo((props) => {
                 <h3 className="chart-title">{t("statistics.hourly.title")}</h3>
             </div>
             <div className="chart-body">
-                <Bar data={chartData} options={chartOptions} />
+                <ChartWrapper type="bar" data={chartData} options={chartOptions} />
             </div>
         </div>
     );

client/src/pages/Statistics/charts/PingChart.jsx

@@ -1,4 +1,4 @@
-import { Line } from "react-chartjs-2";
+import ChartWrapper from "@/common/components/ChartWrapper";
 import { useMemo, useContext, memo } from "react";
 import { t } from "i18next";
 import { ThemeContext } from "@/common/contexts/Theme";
@@ -274,7 +274,7 @@ const PingChart = memo(({ compact = false, ...props }) => {
                 <h3 className="chart-title">{t("latest.ping")} ({t("latest.ping_unit")})</h3>
             </div>
             <div className="chart-body">
-                <Line data={chartData} options={chartOptions} />
+                <ChartWrapper type="line" data={chartData} options={chartOptions} />
             </div>
         </div>
     );

client/src/pages/Statistics/charts/SpeedChart/SpeedChart.jsx

@@ -1,4 +1,4 @@
-import { Line } from "react-chartjs-2";
+import ChartWrapper from "@/common/components/ChartWrapper";
 import { useMemo, useContext, memo } from "react";
 import { t } from "i18next";
 import { ThemeContext } from "@/common/contexts/Theme";
@@ -246,7 +246,7 @@ export const SpeedChart = memo(({ labels, data, dataKey, titleKey, color, onClic
                 <h3 className="chart-title">{t(titleKey)} ({t("latest.speed_unit")})</h3>
             </div>
             <div className="chart-body">
-                <Line data={chartData} options={chartOptions} />
+                <ChartWrapper type="line" data={chartData} options={chartOptions} />
             </div>
         </div>
     );