diff --git a/web/package-lock.json b/web/package-lock.json
index bcf0eeb..730e2b1 100755
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -11,7 +11,7 @@
         "@mdi/font": "^7.3.67",
         "apollo-link-ws": "^1.0.20",
         "apollo-utilities": "^1.3.4",
-        "chart.js": "^3.7.0",
+        "chart.js": "^4.4.1",
         "chartjs-adapter-date-fns": "^3.0.0",
         "date-fns": "^2.29.3",
         "eslint": "^8.56.0",
@@ -21,7 +21,7 @@
         "validator": "^13.7.0",
         "vue": "^2.7.15",
         "vue-apollo": "^3.1.1",
-        "vue-chartjs": "^4.1.2",
+        "vue-chartjs": "^5.3.0",
         "vue-json-pretty": "^1.9.3",
         "vue-router": "^3.6.5",
         "vue-the-mask": "^0.11.1",
@@ -3860,6 +3860,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -9824,9 +9829,15 @@
       "dev": true
     },
     "node_modules/chart.js": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.0.tgz",
-      "integrity": "sha512-31gVuqqKp3lDIFmzpKIrBeum4OpZsQjSIAqlOpgjosHDJZlULtvwLEZKtEhIAZc7JMPaHlYMys40Qy9Mf+1AAg=="
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.1.tgz",
+      "integrity": "sha512-C74QN1bxwV1v2PEujhmKjOZ7iUM4w6BWs23Md/6aOZZSlwMzeCIDGuZay++rBgChYru7/+QFeoQW0fQoP534Dg==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=7"
+      }
     },
     "node_modules/chartjs-adapter-date-fns": {
       "version": "3.0.0",
@@ -20741,12 +20752,12 @@
       }
     },
     "node_modules/vue-chartjs": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-4.1.2.tgz",
-      "integrity": "sha512-QSggYjeFv/L4jFSBQpX8NzrAvX0B+Ha6nDgxkTG8tEXxYOOTwKI4phRLe+B4f+REnkmg7hgPY24R0cixZJyXBg==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.0.tgz",
+      "integrity": "sha512-8XqX0JU8vFZ+WA2/knz4z3ThClduni2Nm0BMe2u0mXgTfd9pXrmJ07QBI+WAij5P/aPmPMX54HCE1seWL37ZdQ==",
       "peerDependencies": {
-        "chart.js": "^3.7.0",
-        "vue": "^3.0.0-0 || ^2.6.0"
+        "chart.js": "^4.1.1",
+        "vue": "^3.0.0-0 || ^2.7.0"
       }
     },
     "node_modules/vue-cli-plugin-apollo": {
@@ -25113,6 +25124,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -29813,9 +29829,12 @@
       }
     },
     "chart.js": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.0.tgz",
-      "integrity": "sha512-31gVuqqKp3lDIFmzpKIrBeum4OpZsQjSIAqlOpgjosHDJZlULtvwLEZKtEhIAZc7JMPaHlYMys40Qy9Mf+1AAg=="
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.1.tgz",
+      "integrity": "sha512-C74QN1bxwV1v2PEujhmKjOZ7iUM4w6BWs23Md/6aOZZSlwMzeCIDGuZay++rBgChYru7/+QFeoQW0fQoP534Dg==",
+      "requires": {
+        "@kurkle/color": "^0.3.0"
+      }
     },
     "chartjs-adapter-date-fns": {
       "version": "3.0.0",
@@ -37970,9 +37989,9 @@
       }
     },
     "vue-chartjs": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-4.1.2.tgz",
-      "integrity": "sha512-QSggYjeFv/L4jFSBQpX8NzrAvX0B+Ha6nDgxkTG8tEXxYOOTwKI4phRLe+B4f+REnkmg7hgPY24R0cixZJyXBg==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.0.tgz",
+      "integrity": "sha512-8XqX0JU8vFZ+WA2/knz4z3ThClduni2Nm0BMe2u0mXgTfd9pXrmJ07QBI+WAij5P/aPmPMX54HCE1seWL37ZdQ==",
       "requires": {}
     },
     "vue-cli-plugin-apollo": {
diff --git a/web/package.json b/web/package.json
index e3c4338..725a953 100755
--- a/web/package.json
+++ b/web/package.json
@@ -12,7 +12,7 @@
     "@mdi/font": "^7.3.67",
     "apollo-link-ws": "^1.0.20",
     "apollo-utilities": "^1.3.4",
-    "chart.js": "^3.7.0",
+    "chart.js": "^4.4.1",
     "chartjs-adapter-date-fns": "^3.0.0",
     "date-fns": "^2.29.3",
     "eslint": "^8.56.0",
@@ -22,7 +22,7 @@
     "validator": "^13.7.0",
     "vue": "^2.7.15",
     "vue-apollo": "^3.1.1",
-    "vue-chartjs": "^4.1.2",
+    "vue-chartjs": "^5.3.0",
     "vue-json-pretty": "^1.9.3",
     "vue-router": "^3.6.5",
     "vue-the-mask": "^0.11.1",
diff --git a/web/src/components/charts/AccessPointSignalStrengthChart.vue b/web/src/components/charts/AccessPointSignalStrengthChart.vue
index f8bdb21..a2a0d02 100644
--- a/web/src/components/charts/AccessPointSignalStrengthChart.vue
+++ b/web/src/components/charts/AccessPointSignalStrengthChart.vue
@@ -1,7 +1,7 @@
 <template>
   <LineChart
-    :chart-options="chartOptions"
-    :chart-data="chartData"
+    :options="chartOptions"
+    :data="chartData"
     :chart-id="chartId"
     :dataset-id-key="datasetIdKey"
     :plugins="plugins"
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import { Line as LineChart } from 'vue-chartjs/legacy'
+import { Line as LineChart } from 'vue-chartjs'
 import colors from 'vuetify/lib/util/colors'
 
 import { Chart as ChartJS, registerables } from 'chart.js'
diff --git a/web/src/components/charts/ClientsChart.vue b/web/src/components/charts/ClientsChart.vue
index 94195df..0e58ff7 100644
--- a/web/src/components/charts/ClientsChart.vue
+++ b/web/src/components/charts/ClientsChart.vue
@@ -1,8 +1,8 @@
 <template>
   <LineChart
     v-if="stats"
-    :chart-options="chartOptions"
-    :chart-data="chartData"
+    :options="chartOptions"
+    :data="chartData"
     :chart-id="chartId"
     :dataset-id-key="datasetIdKey"
     :plugins="plugins"
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import { Line as LineChart } from 'vue-chartjs/legacy'
+import { Line as LineChart } from 'vue-chartjs'
 import 'chartjs-adapter-date-fns'
 import colors from 'vuetify/lib/util/colors'