diff --git a/www/door/graph.html b/www/door/graph.html
index 78c189d..e8d1f4e 100644
--- a/www/door/graph.html
+++ b/www/door/graph.html
@@ -1,30 +1,29 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Inngangsverkstedet</title>
     <style>
-        body {
-            text-align: center;
-            width: 80vw;
-            margin: auto auto;
-        }
-        #graphDiv {
-            display: flex;
-            flex-direction: column;
-        }
-
+      body {
+        text-align: center;
+        width: 80vw;
+        margin: auto auto;
+      }
+      #graphDiv {
+        display: flex;
+        flex-direction: column;
+      }
     </style>
-</head>
-<body>
+  </head>
+  <body>
     <h2>En kort analyse av nerders døgnrytme i deres naturlige habitat, PVV</h2>
     <div id="graphDiv">
-        <h4>Siste 24 timer</h4>
-        <canvas id="doorGraphDay"></canvas>
-        <h4>Siste 7 dager</h4>
-        <canvas id="doorGraphWeek"></canvas>
+      <h4>Siste 24 timer</h4>
+      <canvas id="doorGraphDay"></canvas>
+      <h4>Siste 7 dager</h4>
+      <canvas id="doorGraphWeek"></canvas>
     </div>
 
     <script
@@ -44,115 +43,131 @@
     ></script>
 
     <script>
+      const graphElDay = document.getElementById("doorGraphDay");
+      const graphElWeek = document.getElementById("doorGraphWeek");
 
-    const graphElDay = document.getElementById("doorGraphDay");
-    const graphElWeek = document.getElementById("doorGraphWeek");
+      const XHR = new XMLHttpRequest();
+      const url = "/door/?period=week";
+      XHR.open("GET", url);
+      XHR.send();
 
-    const XHR = new XMLHttpRequest();
-    const url="/door/?period=week";
-    XHR.open("GET", url);
-    XHR.send();
-
-
-    XHR.onreadystatechange = ()=>{
+      XHR.onreadystatechange = () => {
         if (XHR.readyState == 4 && XHR.status == 200) {
-            console.log("Response 200 from API")
-            response = JSON.parse(XHR.responseText); //Should be try-catched?
-            if (response.status != "OK") {
-                console.log("Error when connecting to API.");
-                return
-            } else {
-                const allDatapoints = response.entries;
-                console.log("Success, " + allDatapoints.length + " datapoints received.");
+          console.log("Response 200 from API");
+          response = JSON.parse(XHR.responseText); //Should be try-catched?
+          if (response.status != "OK") {
+            console.log("Error when connecting to API.");
+            return;
+          } else {
+            const allDatapoints = response.entries;
+            console.log(
+              "Success, " + allDatapoints.length + " datapoints received.",
+            );
 
-                const dayDatapoints = getLastDay(allDatapoints);
+            const dayDatapoints = getLastDay(allDatapoints);
 
-                displayLineDiagram(graphElDay, dayDatapoints, "hour");
-                displayLineDiagram(graphElWeek, allDatapoints, "day");
-            }
+            displayLineDiagram(graphElDay, dayDatapoints, "hour");
+            displayLineDiagram(graphElWeek, allDatapoints, "day");
+          }
         }
-    }
+      };
 
-    function getLastDay(data) {
+      function getLastDay(data) {
         let date = new Date();
         let curTime = date.getTime();
-        let targetTime = parseInt(curTime/1e3) - (60*60*24);
+        let targetTime = parseInt(curTime / 1e3) - 60 * 60 * 24;
 
         let i;
         for (i = 0; i < data.length; i++) {
-            if (data[i].time < targetTime) {
-                break;
-            }
+          if (data[i].time < targetTime) {
+            break;
+          }
         }
         return data.slice(0, i);
-    }
+      }
 
-    function displayLineDiagram(canv, data, timeunit) {
+      // https://www.chartjs.org/docs/latest/configuration/canvas-background.html
+      const bgColorPlugin = {
+        id: "bgColorPlugin",
+        beforeDraw: (chart, args, options) => {
+          const { ctx } = chart;
+          ctx.save();
+          ctx.globalCompositeOperation = "destination-over";
+          ctx.fillStyle = options.color || "#99ffff";
+          ctx.fillRect(0, 0, chart.width, chart.height);
+          ctx.restore();
+        },
+      };
+
+      function displayLineDiagram(canv, data, timeunit) {
         let ctx = canv.getContext("2d");
-        let dotColor = data.map(entry => entry.open ? "rgb(10, 150, 10)" : "rgb(200, 100, 100)");
+        let dotColor = data.map((entry) =>
+          entry.open ? "rgb(10, 150, 10)" : "rgb(200, 100, 100)",
+        );
 
         let chart = new Chart(ctx, {
-            type: 'line',
-            data: {
-                labels: data.map(entry=> 1e3 * entry.time),
-                datasets: [{
-                    data: data.map(entry => entry.open),
-                    stepped: "before",
-                    borderColor: dotColor,
-                    backgroundColor: dotColor
-                }],
-            },
-            options: {
-                scales: {
-                    xAxis: {
-                        type: "time",
-                        time: {
-                            unit: timeunit
-                        },
-                    },
-                    yAxis: {
-                        suggestedMin: -0.1,
-                        suggestedMax: 1.1,
-                        grid: {display: false},
-                        ticks: {
-                            callback: function(label, index, labels) {
-                                if (label == 0) {
-                                    return "Stengt";
-                                } else if (label == 1) {
-                                    return "Åpent";
-                                } else {
-                                    return "";
-                                }
-                            }
-                        }
-                    }
+          type: "line",
+          data: {
+            labels: data.map((entry) => 1e3 * entry.time),
+            datasets: [
+              {
+                data: data.map((entry) => entry.open),
+                stepped: "before",
+                segment: {
+                  borderColor: (ctx) =>
+                    ctx.p0.parsed.y === 1
+                      ? "rgb(10, 150, 10)"
+                      : "rgb(200, 100, 100)",
                 },
-                plugins: {
-                    legend: {
-                        display: false
-                    },
-                    tooltip: {
-                        callbacks: {
-                            label: function(tooltipItem) {
-                                const value = tooltipItem.formattedValue;
-                                if (value == 0) {
-                                    return "Stengt";
-                                } else if (value == 1) {
-                                    return "Åpent";
-                                } else {
-                                    return "";
-                                }
-                            }
-                        }
-                    }
-                }
-            }
+                borderColor: dotColor,
+                backgroundColor: dotColor,
+              },
+            ],
+          },
+          options: {
+            scales: {
+              x: {
+                type: "time",
+                display: true,
+                time: {
+                  unit: timeunit,
+                },
+                ticks: {
+                  display: true,
+                  source: "data",
+                },
+                grid: {
+                  display: true,
+                },
+              },
+              y: {
+                suggestedMin: -0.1,
+                suggestedMax: 1.1,
+                grid: { display: false },
+                ticks: {
+                  callback: (label, index, labels) =>
+                    label === 1 ? "Åpent" : label === 0 ? "Stengt" : "",
+                },
+              },
+            },
+            plugins: {
+              legend: {
+                display: false,
+              },
+              tooltip: {
+                callbacks: {
+                  label: (tooltipItem) =>
+                    tooltipItem.formattedValue === "1" ? "Åpent" : "Stengt",
+                },
+              },
+              bgColorPlugin: {
+                color: "#EEEEEE",
+              },
+            },
+          },
+          plugins: [bgColorPlugin],
         });
-    }
-
-
-
+      }
     </script>
-
-</body>
+  </body>
 </html>
