--- a/client/src/components/fairway/Fairwayprofile.vue	Thu Jul 11 19:21:12 2019 +0200
+++ b/client/src/components/fairway/Fairwayprofile.vue	Fri Jul 12 09:55:03 2019 +0200
@@ -150,7 +150,7 @@
 import { mapState, mapGetters } from "vuex";
 import debounce from "debounce";
 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";
@@ -159,7 +159,7 @@
 const WATER_COLOR = "#005DFF";
 
 export default {
-  mixins: [pdfgen, templateLoader],
+  mixins: [diagram, pdfgen, templateLoader],
   name: "fairwayprofile",
   components: {
     DiagramLegend: () => import("@/components/DiagramLegend")
@@ -350,10 +350,16 @@
       offScreen.style.height = `${svgHeight}px`;
       this.renderTo({
         element: offScreen,
-        dimensions: {
-          svgWidth: svgWidth - this.margin.right - this.margin.left,
-          svgHeight: svgHeight - this.margin.top - this.margin.bottom
-        }
+        dimensions: this.getDimensions({
+          svgWidth: svgWidth,
+          svgHeight: svgHeight,
+          main: {
+            top: 20,
+            right: 80,
+            bottom: 60,
+            left: 80
+          }
+        })
       });
       var svg = offScreen.querySelector("svg");
       // use default width,height if they are missing in the template definition
@@ -430,18 +436,24 @@
       if (!this.height || !this.width) return; // do not try to render when height and width are unknown
       this.renderTo({
         element: ".diagram-container",
-        dimensions: {
-          svgWidth: this.width - this.margin.right - this.margin.left,
-          svgHeight: this.height - this.margin.top - this.margin.bottom
-        }
+        dimensions: this.getDimensions({
+          svgWidth: this.width,
+          svgHeight: this.height,
+          main: {
+            top: 20,
+            right: 80,
+            bottom: 60,
+            left: 80
+          }
+        })
       });
     },
     renderTo({ element, dimensions }) {
       let svg = d3.select(element).append("svg");
       svg.attr("width", "100%");
       svg.attr("height", "100%");
-      const width = dimensions.svgWidth;
-      const height = dimensions.svgHeight;
+      const width = dimensions.width;
+      const height = dimensions.mainHeight;
       const currentData = this.currentData;
       const additionalData = this.additionalData;
       const { xScale, yScaleRight, graph } = this.generateScalesAndGraph(
@@ -525,8 +537,8 @@
       graph
         .append("text")
         .attr("transform", ["rotate(-90)"])
-        .attr("y", dimensions.svgWidth + 45)
-        .attr("x", -dimensions.svgHeight / 2)
+        .attr("y", dimensions.width + 45)
+        .attr("x", -dimensions.mainHeight / 2)
         .attr("fill", "black")
         .style("text-anchor", "middle")
         .text("Depth [m]");
@@ -534,7 +546,7 @@
         .append("text")
         .attr("transform", ["rotate(-90)"])
         .attr("y", -50)
-        .attr("x", -dimensions.svgHeight / 2)
+        .attr("x", -dimensions.mainHeight / 2)
         .attr("fill", "black")
         .style("text-anchor", "middle")
         .text("Waterlevel [m]");
@@ -547,9 +559,9 @@
         .style("text-anchor", "middle")
         .attr("transform", [
           "translate(" +
-            dimensions.svgWidth / 2 +
+            dimensions.width / 2 +
             "," +
-            dimensions.svgHeight +
+            dimensions.mainHeight +
             ")",
           "rotate(0)"
         ])

--- a/client/src/lib/mixins.js	Thu Jul 11 19:21:12 2019 +0200
+++ b/client/src/lib/mixins.js	Fri Jul 12 09:55:03 2019 +0200
@@ -37,12 +37,13 @@
 
 export const diagram = {
   methods: {
-    getDimensions({ main, nav }) {
-      //dimensions and margins
-      const elem = document.querySelector("#" + this.containerId);
-      const svgWidth = elem != null ? elem.clientWidth : 0;
-      const svgHeight = elem != null ? elem.clientHeight : 0;
-      const mainMargin = main || { top: 20, right: 20, bottom: 110, left: 80 };
+    getDimensions({ svgWidth, svgHeight, main, nav }) {
+      const mainMargin = main || {
+        top: 20,
+        right: 80,
+        bottom: 60,
+        left: 80
+      };
       const navMargin = nav || {
         top: svgHeight - mainMargin.top - 65,
         right: 20,