diff --git a/main.go b/main.go
index cdb81ce..5a635fe 100644
--- a/main.go
+++ b/main.go
@@ -26,7 +26,7 @@ import (
 	"time"
 )
 
-const VERSION = "v7"
+const VERSION = "v8"
 
 var (
 	logger              *slog.Logger
diff --git a/views/layouts/main.gotmpl b/views/layouts/main.gotmpl
index 741061b..f6cbe97 100644
--- a/views/layouts/main.gotmpl
+++ b/views/layouts/main.gotmpl
@@ -5,6 +5,18 @@
 		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 		{{ template "fonts" }}
 		<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/main.css">
+
+		<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"></script>
+		<script src="https://cdn.jsdelivr.net/npm/luxon@3.3.0/build/global/luxon.min.js"></script>
+		<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.3.1"></script>
+
+		<script type="importmap">
+		{
+			"imports": {
+				"chart.js": "/js/{{ .VERSION }}/lib/chartjs/index.d.ts"
+			}
+		}
+		</script>
 	</head>
 	<body>
 		<div id="layout">
diff --git a/views/pages/datapoint_values.gotmpl b/views/pages/datapoint_values.gotmpl
index fe4651c..f568b95 100644
--- a/views/pages/datapoint_values.gotmpl
+++ b/views/pages/datapoint_values.gotmpl
@@ -2,8 +2,19 @@
 	{{ $version := .VERSION }}
 	<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/datapoints.css">
 
+	<script type="module"  defer>
+		import { DataGraph } from "/js/{{ .VERSION }}/datapoint_graph.mjs"
+		const graph = new DataGraph({{ .Data.Datapoint }})
+		graph.setData({{ .Data.Values }})
+		graph.render('chart')
+	</script>
+
 	{{ block "page_label" . }}{{end}}
 
+	<div>
+		<canvas id="chart"></canvas>
+	</div>
+
 	<div id="values">
 		{{ range .Data.Values }}
 		<div class="value">{{ format_time .Ts }}</div>
