--- a/client/src/components/fairway/Fairwayprofile.vue	Thu Jul 18 12:50:33 2019 +0200
+++ b/client/src/components/fairway/Fairwayprofile.vue	Thu Jul 18 15:04:30 2019 +0200
@@ -411,15 +411,17 @@
       svg.attr("height", "100%");
       const width = dimensions.width;
       const height = dimensions.mainHeight;
+      const offsetY = 15;
       const currentData = this.currentData;
       const additionalData = this.additionalData;
       const { xScale, yScaleRight, graph } = this.generateScalesAndGraph({
         svg,
         height,
         width,
-        dimensions
+        dimensions,
+        offsetY
       });
-      this.drawWaterlevel({ graph, xScale, yScaleRight, height });
+      this.drawWaterlevel({ graph, xScale, yScaleRight, height, offsetY });
       this.drawLabels({ graph, dimensions });
       if (currentData) {
         this.drawProfile({
@@ -430,7 +432,8 @@
           height,
           color: GROUND_COLOR,
           strokeColor: "black",
-          opacity: 1
+          opacity: 1,
+          offsetY
         });
       }
       if (additionalData) {
@@ -442,7 +445,8 @@
           height,
           color: GROUND_COLOR,
           strokeColor: "#943007",
-          opacity: 0.6
+          opacity: 0.6,
+          offsetY
         });
       }
       this.drawFairway({ graph, xScale, yScaleRight });
@@ -510,22 +514,18 @@
         .text("Waterlevel [m]");
       graph
         .append("text")
-        .attr("y", 30)
+        .attr("y", 0)
         .attr("x", 0)
         .attr("dy", "1em")
         .attr("fill", "black")
         .style("text-anchor", "middle")
         .attr("transform", [
-          "translate(" +
-            dimensions.width / 2 +
-            "," +
-            dimensions.mainHeight +
-            ")",
+          `translate(${dimensions.width / 2} ${dimensions.mainHeight})`,
           "rotate(0)"
         ])
         .text("Width [m]");
     },
-    generateScalesAndGraph({ svg, height, width, dimensions }) {
+    generateScalesAndGraph({ svg, height, width, dimensions, offsetY }) {
       let xScale = d3
         .scaleLinear()
         .domain([0, this.totalLength])
@@ -568,7 +568,7 @@
         );
       graph
         .append("g")
-        .attr("transform", "translate(0," + height + ")")
+        .attr("transform", `translate(0 ${height - offsetY})`)
         .call(xAxis)
         .selectAll(".tick text")
         .attr("fill", "black")
@@ -579,7 +579,7 @@
         .attr("stroke", "black");
       graph
         .append("g")
-        .attr("transform", "translate(" + width + ",0)")
+        .attr("transform", `translate(${width} ${-offsetY})`)
         .call(yAxisRight)
         .selectAll(".tick text")
         .attr("fill", "black")
@@ -590,7 +590,7 @@
         .attr("stroke", "black");
       graph
         .append("g")
-        .attr("transform", "translate(0 0)")
+        .attr("transform", `translate(0 ${-offsetY})`)
         .call(yAxisLeft)
         .selectAll(".tick text")
         .attr("fill", "black")
@@ -603,7 +603,7 @@
       graph.selectAll(".domain").attr("stroke", "black");
       return { xScale, yScaleRight, graph };
     },
-    drawWaterlevel({ graph, xScale, yScaleRight, height }) {
+    drawWaterlevel({ graph, xScale, yScaleRight, height, offsetY }) {
       let waterArea = d3
         .area()
         .x(function(d) {
@@ -619,7 +619,8 @@
         .attr("fill-opacity", 0.65)
         .attr("fill", WATER_COLOR)
         .attr("stroke", "transparent")
-        .attr("d", waterArea);
+        .attr("d", waterArea)
+        .attr("transform", `translate(0 ${-offsetY})`);
     },
     drawProfile({
       graph,
@@ -629,7 +630,8 @@
       height,
       color,
       strokeColor,
-      opacity
+      opacity,
+      offsetY
     }) {
       for (let part of currentData) {
         let profileLine = d3
@@ -659,7 +661,8 @@
           .attr("fill", color)
           .attr("stroke", "transparent")
           .attr("fill-opacity", opacity)
-          .attr("d", profileArea);
+          .attr("d", profileArea)
+          .attr("transform", `translate(0 ${-offsetY})`);
         graph
           .append("path")
           .datum(part)
@@ -670,7 +673,8 @@
           .attr("stroke-width", 3)
           .attr("stroke-opacity", opacity)
           .attr("fill-opacity", 0)
-          .attr("d", profileLine);
+          .attr("d", profileLine)
+          .attr("transform", `translate(0 ${-offsetY})`);
       }
     },
     scaleFairwayProfile() {

--- a/client/src/lib/mixins.js	Thu Jul 18 12:50:33 2019 +0200
+++ b/client/src/lib/mixins.js	Thu Jul 18 15:04:30 2019 +0200
@@ -18,6 +18,18 @@
 import locale2 from "locale2";
 import { mapState } from "vuex";
 import { HTTP } from "@/lib/http";
+import * as d3 from "d3";
+
+/*eslint no-unused-vars: ["error", { "varsIgnorePattern": "debugSVG" }]*/
+
+const debugSVG = ({ svg, svgWidth, svgHeight }) => {
+  d3.select(svg)
+    .append("rect")
+    .attr("width", svgWidth)
+    .attr("height", svgHeight)
+    .attr("fill-opacity", 0)
+    .attr("stroke", "#ff0000");
+};
 
 export const sortTable = {
   data() {