--- a/client/src/application/Main.vue	Wed Sep 26 13:46:18 2018 +0200
+++ b/client/src/application/Main.vue	Wed Sep 26 14:25:21 2018 +0200
@@ -30,10 +30,6 @@
     return {
       width: null,
       height: null,
-      xScale: {
-        x: 0,
-        y: 300
-      },
       yScaleRight: {
         lo: -6,
         hi: 1
@@ -48,7 +44,12 @@
   },
   computed: {
     ...mapGetters("application", ["isSplitscreen", "drawMode"]),
-    ...mapGetters("fairwayprofile", ["currentProfile", "minAlt", "maxAlt"]),
+    ...mapGetters("fairwayprofile", [
+      "currentProfile",
+      "minAlt",
+      "maxAlt",
+      "totalLength"
+    ]),
     xAxis() {
       return [this.xScale.x, this.xScale.y];
     },
@@ -66,6 +67,12 @@
         lo: this.minAlt,
         hi: this.maxAlt
       };
+    },
+    xScale() {
+      return {
+        x: 0,
+        y: this.totalLength
+      };
     }
   },
   created() {

--- a/client/src/fairway/Fairwayprofile.vue	Wed Sep 26 13:46:18 2018 +0200
+++ b/client/src/fairway/Fairwayprofile.vue	Wed Sep 26 14:25:21 2018 +0200
@@ -34,6 +34,9 @@
     return {};
   },
   watch: {
+    data() {
+      this.drawDiagram();
+    },
     width() {
       this.drawDiagram();
     },
@@ -51,11 +54,12 @@
       const width = this.width - this.margin.right - this.margin.left;
       const height = this.height - this.margin.top - this.margin.bottom;
       const currentData = this.data;
-      const { xScale, yScaleRight, graph } = this.generateCoordinates(
-        svg,
-        height,
-        width
-      );
+      const {
+        xScale,
+        yScaleRight,
+        yScaleLeft,
+        graph
+      } = this.generateCoordinates(svg, height, width);
       this.drawWaterlevel({
         graph,
         xScale,
@@ -66,7 +70,7 @@
       this.drawProfile({
         graph,
         xScale,
-        yScaleRight,
+        yScaleLeft,
         currentData,
         height,
         width
@@ -126,40 +130,42 @@
         .attr("stroke", WATER_COLOR)
         .attr("d", waterArea);
     },
-    drawProfile({ graph, xScale, yScaleRight, currentData, height }) {
-      let profileLine = d3
-        .line()
-        .x(d => {
-          return xScale(d.x);
-        })
-        .y(d => {
-          return yScaleRight(d.y);
-        });
-      let profileArea = d3
-        .area()
-        .x(function(d) {
-          return xScale(d.x);
-        })
-        .y0(height)
-        .y1(function(d) {
-          return yScaleRight(d.y);
-        });
-      graph
-        .append("path")
-        .datum(currentData)
-        .attr("fill", GROUND_COLOR)
-        .attr("stroke", GROUND_COLOR)
-        .attr("stroke-width", 3)
-        .attr("d", profileArea);
-      graph
-        .append("path")
-        .datum(currentData)
-        .attr("fill", "none")
-        .attr("stroke", "black")
-        .attr("stroke-linejoin", "round")
-        .attr("stroke-linecap", "round")
-        .attr("stroke-width", 3)
-        .attr("d", profileLine);
+    drawProfile({ graph, xScale, yScaleLeft, currentData, height }) {
+      for (let part of currentData) {
+        let profileLine = d3
+          .line()
+          .x(d => {
+            return xScale(d.x);
+          })
+          .y(d => {
+            return yScaleLeft(d.y);
+          });
+        let profileArea = d3
+          .area()
+          .x(function(d) {
+            return xScale(d.x);
+          })
+          .y0(height)
+          .y1(function(d) {
+            return yScaleLeft(d.y);
+          });
+        graph
+          .append("path")
+          .datum(part)
+          .attr("fill", GROUND_COLOR)
+          .attr("stroke", GROUND_COLOR)
+          .attr("stroke-width", 3)
+          .attr("d", profileArea);
+        graph
+          .append("path")
+          .datum(part)
+          .attr("fill", "none")
+          .attr("stroke", "black")
+          .attr("stroke-linejoin", "round")
+          .attr("stroke-linecap", "round")
+          .attr("stroke-width", 3)
+          .attr("d", profileLine);
+      }
     }
   },
   mounted() {

--- a/client/src/fairway/store.js	Wed Sep 26 13:46:18 2018 +0200
+++ b/client/src/fairway/store.js	Wed Sep 26 14:25:21 2018 +0200
@@ -29,6 +29,9 @@
     },
     maxAlt: state => {
       return state.maxAlt;
+    },
+    totalLength: state => {
+      return state.totalLength;
     }
   },
   mutations: {
@@ -43,7 +46,7 @@
       state.currentProfile = result.points;
       state.minAlt = result.minAlt;
       state.maxAlt = result.maxAlt;
-      state.totalLength = result.totalLength;
+      state.totalLength = result.lengthPolyLine;
     },
     setStartPoint: (state, start) => {
       state.startPoint = start;