--- a/client/src/components/fairway/Fairwayprofile.vue	Fri Jul 12 15:53:20 2019 +0200
+++ b/client/src/components/fairway/Fairwayprofile.vue	Fri Jul 12 16:18:49 2019 +0200
@@ -156,9 +156,7 @@
   mixins: [diagram, pdfgen, templateLoader],
   data() {
     return {
-      containerId: "fairwayprofile-diagram-container",
-      width: null,
-      height: null
+      containerId: "fairwayprofile-diagram-container"
     };
   },
   computed: {
@@ -327,15 +325,17 @@
       };
     },
     drawDiagram() {
+      // remove old diagram and exit if necessary data is missing
       d3.select("#" + this.containerId + " svg").remove();
-      this.scaleFairwayProfile();
-      if (!this.height || !this.width) return; // do not try to render when height and width are unknown
-      const layout = this.getPrintLayout(this.height);
+      const elem = document.querySelector("#" + this.containerId);
+      const svgWidth = elem.clientWidth;
+      const svgHeight = elem.clientHeight;
+      const layout = this.getPrintLayout();
       this.renderTo({
         element: "#" + this.containerId,
         dimensions: this.getDimensions({
-          svgWidth: this.width,
-          svgHeight: this.height,
+          svgWidth: svgWidth,
+          svgHeight: svgHeight,
           ...layout
         })
       });
@@ -607,16 +607,6 @@
           .attr("fill-opacity", 0)
           .attr("d", profileLine);
       }
-    },
-    scaleFairwayProfile() {
-      if (!document.querySelector("#" + this.containerId)) return;
-      const clientHeight = document.querySelector("#" + this.containerId)
-        .clientHeight;
-      const clientWidth = document.querySelector("#" + this.containerId)
-        .clientWidth;
-      if (!clientHeight || !clientWidth) return;
-      this.height = clientHeight;
-      this.width = clientWidth;
     }
   }
 };