--- a/client/src/components/gauge/HydrologicalConditions.vue	Fri Jul 12 09:55:03 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Fri Jul 12 10:03:11 2019 +0200
@@ -105,13 +105,13 @@
 import debounce from "debounce";
 import { startOfYear, endOfYear } from "date-fns";
 import svg2pdf from "svg2pdf.js";
-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";
 
 export default {
-  mixins: [pdfgen, templateLoader],
+  mixins: [diagram, pdfgen, templateLoader],
   components: {
     DiagramLegend: () => import("@/components/DiagramLegend")
   },
@@ -227,7 +227,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");
@@ -317,7 +324,14 @@
         element: `#${this.containerId}`,
         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
+          }
         })
       });
     },
@@ -531,20 +545,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) {
       const waterlevelValues = [];
       this.longtermWaterlevels.forEach(wl => {