diff --git a/web/components/chart.tsx b/web/components/chart.tsx
index e324a7c4d..6fcc06806 100644
--- a/web/components/chart.tsx
+++ b/web/components/chart.tsx
@@ -1,5 +1,6 @@
 import { LineChart } from 'react-chartkick';
-import 'chart.js';
+import 'chartkick/chart.js'
+
 import format from 'date-fns/format';
 
 interface TimedValue {
@@ -19,7 +20,7 @@ function createGraphDataset(dataArray) {
   const dataValues = {};
   dataArray.forEach(item => {
     const dateObject = new Date(item.time);
-    const dateString = format(dateObject, 'p P');
+    const dateString = format(dateObject, 'H:mma');
     dataValues[dateString] = item.value;
   });
   return dataValues;
diff --git a/web/package-lock.json b/web/package-lock.json
index 53667a6a6..490a4f556 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -1072,14 +1072,33 @@
       "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg=="
     },
     "chart.js": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.0.2.tgz",
-      "integrity": "sha512-DR0GmFSlxcFJp/w//ZmbxSduAkH/AqwxoiZxK97KHnWZf6gvsKWS3160WvNMMHYvzW9OXqGWjPjVh1Qu+xDabg=="
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.1.0.tgz",
+      "integrity": "sha512-bKJi2VbC4fqZXlLbK7LKVvmG9crjoG9anfp96utZLyIGPuCx+YN+5/HDXy98QGt3lf74T8gKUPISUZL222tDJQ=="
+    },
+    "chartjs-adapter-date-fns": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-2.0.0.tgz",
+      "integrity": "sha512-rmZINGLe+9IiiEB0kb57vH3UugAtYw33anRiw5kS2Tu87agpetDDoouquycWc9pRsKtQo5j+vLsYHyr8etAvFw==",
+      "optional": true
     },
     "chartkick": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/chartkick/-/chartkick-3.2.1.tgz",
-      "integrity": "sha512-zV0kUeZNqrX28AmPt10QEDXHKadbVFOTAFkCMyJifHzGFkKzGCDXxVR8orZ0fC1HbePzRn5w6kLCOVxDQbMUCg=="
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chartkick/-/chartkick-4.0.3.tgz",
+      "integrity": "sha512-e2WhXYE0VsevyTxol2J4WaHz26iuuSpduK9BVkvIIVrIt6TFlDw7Vm4iXSYIAsDMdC9/UsIV2ZtYIldMMXpvlA==",
+      "requires": {
+        "chart.js": ">=3.0.2",
+        "chartjs-adapter-date-fns": ">=2.0.0",
+        "date-fns": ">=2.0.0"
+      },
+      "dependencies": {
+        "chart.js": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.1.0.tgz",
+          "integrity": "sha512-bKJi2VbC4fqZXlLbK7LKVvmG9crjoG9anfp96utZLyIGPuCx+YN+5/HDXy98QGt3lf74T8gKUPISUZL222tDJQ==",
+          "optional": true
+        }
+      }
     },
     "chokidar": {
       "version": "3.5.1",
@@ -4695,11 +4714,11 @@
       }
     },
     "react-chartkick": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/react-chartkick/-/react-chartkick-0.4.1.tgz",
-      "integrity": "sha512-ydShYzYGCkphlUUMaN6gHHyS+Na9hRj1nvkSvB+cIU3E9JkGkj0Eiin7Y/NJ5165uiQtIbvuWvrPq2vbZHQmCA==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/react-chartkick/-/react-chartkick-0.5.1.tgz",
+      "integrity": "sha512-2tcJTVVY2RaZ3JYI6Yk+ek07XyS5oFNwmXj4pbjJlbjmbsaK1UsFiYcK8dhkf4ES5KFyhJn9gWXLoU6GXjkOhQ==",
       "requires": {
-        "chartkick": "^3.2.0"
+        "chartkick": "^4.0.0"
       }
     },
     "react-dom": {
diff --git a/web/package.json b/web/package.json
index 1e43b7e56..47c11b3d7 100644
--- a/web/package.json
+++ b/web/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
     "antd": "^4.15.0",
-    "chart.js": "^3.0.2",
+    "chart.js": "^3.1.0",
     "classnames": "^2.3.1",
     "date-fns": "^2.20.0",
     "markdown-it": "^12.0.4",
@@ -19,7 +19,7 @@
     "prop-types": "^15.7.2",
     "rc-util": "^5.9.8",
     "react": "^17.0.2",
-    "react-chartkick": "^0.4.1",
+    "react-chartkick": "^0.5.0",
     "react-dom": "^17.0.2",
     "react-linkify": "^1.0.0-alpha",
     "react-markdown": "^5.0.3",