--- a/client/src/application/Main.vue	Wed Sep 26 16:38:02 2018 +0200
+++ b/client/src/application/Main.vue	Wed Sep 26 17:04:47 2018 +0200
@@ -2,7 +2,7 @@
     <div class="main d-flex flex-column">
         <Maplayer :drawMode="drawMode" :split="isSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer>
         <div v-if="isSplitscreen" class="profile d-flex flex-row">
-            <FairwayProfile :data="currentProfile" :height="height" :width="width" :xScale="xAxis" :yScaleLeft="yAxisLeft" :yScaleRight="yAxisRight" :margin="margins"></FairwayProfile>
+            <FairwayProfile :waterLevels="waterLevels" :data="currentProfile" :height="height" :width="width" :xScale="xAxis" :yScaleLeft="yAxisLeft" :yScaleRight="yAxisRight" :margin="margins" :totalLength="totalLength"></FairwayProfile>
         </div>
     </div>
 </template>
@@ -48,7 +48,8 @@
       "currentProfile",
       "minAlt",
       "maxAlt",
-      "totalLength"
+      "totalLength",
+      "waterLevels"
     ]),
     xAxis() {
       return [this.xScale.x, this.xScale.y];
@@ -91,7 +92,7 @@
       const clientWidth = document.querySelector(".profile").clientWidth;
       if (!clientHeight || !clientWidth) return;
       this.height = document.querySelector(".profile").clientHeight - 25;
-      this.width = document.querySelector(".profile").clientWidth - 100;
+      this.width = document.querySelector(".profile").clientWidth - 200;
     }
   }
 };

--- a/client/src/fairway/Fairwayprofile.vue	Wed Sep 26 16:38:02 2018 +0200
+++ b/client/src/fairway/Fairwayprofile.vue	Wed Sep 26 17:04:47 2018 +0200
@@ -1,9 +1,26 @@
 <template>
-    <div class="fairwayprofile">
+    <div class="profiledisplay d-flex flex-row">
+        <div class="fairwayprofile">
+        </div>
+        <div class="waterlevelselection d-flex flex-column">
+            <div class="form-check" v-for="level in waterLevels" :key="level.level">
+                <input class="form-check-input" :id="level.year" v-model="selectedWaterLevel" :value="level.level" type="radio">
+                <label class="form-check-label" :for="level.year">{{level.year}}</label>
+            </div>
+        </div>
     </div>
 </template>
 
 <style lang="scss">
+.waterlevelselection {
+  margin-top: $large-offset;
+  margin-right: $large-offset;
+}
+
+.profiledisplay {
+  width: 100vw;
+}
+
 .fairwayprofile {
   background-color: white;
   margin-left: auto;
@@ -16,7 +33,6 @@
 <script>
 import * as d3 from "d3";
 
-const WATER_COLOR = "#005DFF";
 const GROUND_COLOR = "#4A2F06";
 
 export default {
@@ -28,10 +44,22 @@
     "xScale",
     "yScaleLeft",
     "yScaleRight",
-    "margin"
+    "margin",
+    "totalLength",
+    "waterLevels"
   ],
+  computed: {
+    waterColor() {
+      const result = this.waterLevels.find(
+        x => x.level === this.selectedWaterLevel
+      );
+      return result.color;
+    }
+  },
   data() {
-    return {};
+    return {
+      selectedWaterLevel: this.waterLevels[0].level
+    };
   },
   watch: {
     data() {
@@ -42,6 +70,12 @@
     },
     height() {
       this.drawDiagram();
+    },
+    waterLevels() {
+      this.drawDiagram();
+    },
+    selectedWaterLevel() {
+      this.drawDiagram();
     }
   },
   methods: {
@@ -51,8 +85,8 @@
       let svg = d3.select(chartDiv).append("svg");
       svg.attr("width", this.width);
       svg.attr("height", this.height);
-      const width = this.width - this.margin.right - this.margin.left;
-      const height = this.height - this.margin.top - this.margin.bottom;
+      const width = this.width - this.margin.right - 1.5 * this.margin.left;
+      const height = this.height - this.margin.top - 2 * this.margin.bottom;
       const currentData = this.data;
       const {
         xScale,
@@ -75,6 +109,46 @@
         height,
         width
       });
+      this.drawLabels({
+        graph,
+        xScale,
+        yScaleLeft,
+        currentData,
+        height,
+        width
+      });
+    },
+    drawLabels({ graph, height }) {
+      graph
+        .append("text")
+        .attr("transform", "rotate(-90)")
+        .attr("y", 0 - this.margin.left)
+        .attr("x", -(this.height - this.margin.top - this.margin.bottom) / 2)
+        .attr("dy", "1em")
+        .attr("fill", "black")
+        .style("text-anchor", "middle")
+        .text("Height above Adria [m]");
+      graph
+        .append("text")
+        .attr("transform", ["rotate(-90)"])
+        .attr("y", this.width - 60)
+        .attr("x", -(this.height - this.margin.top - this.margin.bottom) / 2)
+        .attr("dy", "1em")
+        .attr("fill", "black")
+        .style("text-anchor", "middle")
+        .text("Depth [m]");
+      graph
+        .append("text")
+        .attr("y", 0 - this.margin.left)
+        .attr("x", 0 - height / 4)
+        .attr("dy", "1em")
+        .attr("fill", "black")
+        .style("text-anchor", "middle")
+        .attr("transform", [
+          "translate(" + this.width / 2 + "," + this.height + ")",
+          "rotate(0)"
+        ])
+        .text("Width [m]");
     },
     generateCoordinates(svg, height, width) {
       let xScale = d3
@@ -125,9 +199,12 @@
         });
       graph
         .append("path")
-        .datum([{ x: 0, y: 0 }, { x: 300, y: 0 }])
-        .attr("fill", WATER_COLOR)
-        .attr("stroke", WATER_COLOR)
+        .datum([
+          { x: 0, y: this.selectedWaterLevel },
+          { x: this.totalLength, y: this.selectedWaterLevel }
+        ])
+        .attr("fill", this.waterColor)
+        .attr("stroke", this.waterColor)
         .attr("d", waterArea);
     },
     drawProfile({ graph, xScale, yScaleLeft, currentData, height }) {

--- a/client/src/fairway/store.js	Wed Sep 26 16:38:02 2018 +0200
+++ b/client/src/fairway/store.js	Wed Sep 26 17:04:47 2018 +0200
@@ -8,10 +8,17 @@
     minAlt: 0,
     maxAlt: 0,
     currentProfile: [],
+    waterLevels: [
+      { year: "2016", level: 0, color: "#005DFF" },
+      { year: "2017", level: -0.5, color: "#639CFF" }
+    ],
     startPoint: null,
     endPoint: null
   },
   getters: {
+    waterLevels: state => {
+      return state.waterLevels;
+    },
     currentProfile: state => {
       return state.currentProfile;
     },