--- a/client/src/components/gauge/Waterlevel.vue	Fri Jul 12 10:03:11 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Fri Jul 12 10:13:00 2019 +0200
@@ -111,7 +111,7 @@
 import debounce from "debounce";
 import svg2pdf from "svg2pdf.js";
 import { saveAs } from "file-saver";
-import { pdfgen, templateLoader } from "@/lib/mixins";
+import { diagram, pdfgen, templateLoader } from "@/lib/mixins";
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
@@ -121,7 +121,7 @@
 const d3 = Object.assign(d3Base, { lineChunked });
 
 export default {
-  mixins: [pdfgen, templateLoader],
+  mixins: [diagram, pdfgen, templateLoader],
   components: {
     DiagramLegend: () => import("@/components/DiagramLegend")
   },
@@ -269,7 +269,14 @@
         element: offScreen,
         dimensions: this.getDimensions({
           svgWidth: svgWidth,
-          svgHeight: svgHeight
+          svgHeight: svgHeight,
+          main: { top: 20, right: 50, bottom: 110, left: 80 },
+          nav: {
+            top: svgHeight - 85,
+            right: 20,
+            bottom: 30,
+            left: 80
+          }
         })
       });
       var svg = offScreen.querySelector("svg");
@@ -319,12 +326,22 @@
     drawDiagram() {
       // remove old diagram and exit if necessary data is missing
       d3.select("#" + this.containerId + " svg").remove();
-      if (!this.selectedGauge || !this.waterlevels.length) return;
+      const elem = document.querySelector("#" + this.containerId);
+      const svgWidth = elem.clientWidth;
+      const svgHeight = elem.clientHeight;
+      if (!this.selectedGauge || !this.waterlevels.length || !elem) return;
       this.renderTo({
         element: `#${this.containerId}`,
         dimensions: this.getDimensions({
-          svgWidth: document.querySelector("#" + this.containerId).clientWidth,
-          svgHeight: document.querySelector("#" + this.containerId).clientHeight
+          svgWidth: svgWidth,
+          svgHeight: svgHeight,
+          main: { top: 20, right: 50, bottom: 110, left: 80 },
+          nav: {
+            top: svgHeight - 85,
+            right: 20,
+            bottom: 30,
+            left: 80
+          }
         })
       });
     },
@@ -578,20 +595,6 @@
         .attr("fill", "666")
         .style("font-size", "0.8em");
     },
-    getDimensions({ svgWidth, svgHeight }) {
-      const mainMargin = { top: 20, right: 50, bottom: 110, left: 80 };
-      const navMargin = {
-        top: svgHeight - mainMargin.top - 65,
-        right: 20,
-        bottom: 30,
-        left: 80
-      };
-      const width = +svgWidth - mainMargin.left - mainMargin.right;
-      const mainHeight = +svgHeight - mainMargin.top - mainMargin.bottom;
-      const navHeight = +svgHeight - navMargin.top - navMargin.bottom;
-
-      return { width, mainHeight, navHeight, mainMargin, navMargin };
-    },
     getExtent(refWaterLevels) {
       return {
         // set min/max values for the date axis