--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Tue May 07 13:08:03 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Tue May 07 14:06:23 2019 +0200
@@ -3,30 +3,27 @@
     <h1>Available Fairway Depth</h1>
     <UISpinnerOverlay v-if="loading" />
     <div class="d-flex flex-row">
-      <div class="ml-3 mr-auto">
-        <ul>
-          <li v-for="(entry, index) in legend" :key="index">{{ entry }}</li>
-        </ul>
-      </div>
       <div class="d-flex flex-column mr-auto">
         <div class="d-flex flex-row">
-          <div class="mr-3 ml-auto">
-            <select class="mr-3">
+          <div class="mr-3 my-auto ml-auto">
+            <select class="form-control mr-3">
               <option>Monthly</option>
               <option>Quaterly</option>
               <option>Yearly</option>
             </select>
           </div>
-          <div class="mr-3">
-            <label for="from" class="mr-3"><translate>from</translate></label
-            ><input />
+          <div class="d-flex flex-row mr-3">
+            <label for="from" class="my-auto mr-3"
+              ><translate>from</translate></label
+            ><input class="form-control" type="date" />
           </div>
-          <div class="mr-auto">
-            <label for="to" class="mr-3"><translate>to</translate></label
-            ><input />
+          <div class="d-flex flex-row mr-auto">
+            <label for="to" class="my-auto mr-3"
+              ><translate>to</translate></label
+            ><input class="form-control" type="date" />
           </div>
         </div>
-        <div class="diagram-container"></div>
+        <div :id="containerId" class="diagram-container"></div>
       </div>
     </div>
   </div>
@@ -52,7 +49,9 @@
 import * as d3 from "d3";
 import app from "@/main";
 import { displayError } from "@/lib/errors";
+import debounce from "debounce";
 import { HTTP } from "@/lib/http";
+import { diagram } from "@/lib/mixins";
 
 const MOCKDATA = `#label,# >= LDC [h],# < 200.00 [h],# >= 200.00 [h],# >= 230.00 [h],# >= 250.00 [h]
 01-2019, 22.000,1.000, 4.000,6.000, 20.000
@@ -62,8 +61,10 @@
 05-2019, 30.000,0.000,0.000,0.000, 30.000`;
 
 export default {
+  mixins: [diagram],
   data() {
     return {
+      containerId: "availablefairwaydepth",
       loading: false,
       fwData: null,
       width: 1000,
@@ -76,14 +77,14 @@
       legend: "",
       diagram: null,
       yScale: null,
-      barsWidth: 60
+      barsWidth: 60,
+      dimensions: null
     };
   },
+  created() {
+    window.addEventListener("resize", debounce(this.drawDiagram), 100);
+  },
   mounted() {
-    this.yScale = d3
-      .scaleLinear()
-      .domain([-33, 33])
-      .range([this.height - 30, 0]);
     this.loadData();
   },
   computed: {
@@ -137,6 +138,11 @@
         });
     },
     drawDiagram() {
+      this.dimensions = this.getDimensions();
+      this.yScale = d3
+        .scaleLinear()
+        .domain([-33, 33])
+        .range([this.dimensions.mainHeight - 30, 0]);
       d3.select(".diagram-container svg").remove();
       this.generateDiagramContainer();
       this.drawBars();
@@ -147,8 +153,8 @@
       const diagram = d3
         .select(".diagram-container")
         .append("svg")
-        .attr("width", this.width)
-        .attr("height", this.height);
+        .attr("width", this.dimensions.width)
+        .attr("height", this.dimensions.mainHeight);
       this.diagram = diagram
         .append("g")
         .attr("transform", `translate(0 ${this.paddingTop})`);
@@ -216,7 +222,7 @@
         .attr("y", this.yScale(0) + this.labelPaddingTop);
     },
     drawScaleLabel() {
-      const center = this.height / 2;
+      const center = this.dimensions.mainHeight / 2;
       this.diagram
         .append("text")
         .text(this.$options.LEGEND)

--- a/client/src/lib/mixins.js	Tue May 07 13:08:03 2019 +0200
+++ b/client/src/lib/mixins.js	Tue May 07 14:06:23 2019 +0200
@@ -12,7 +12,7 @@
  * Markus Kottländer <markus.kottlaender@intevation.de>
  */
 import locale2 from "locale2";
-const sortTable = {
+export const sortTable = {
   data() {
     return {
       sortColumn: "",
@@ -29,7 +29,30 @@
   }
 };
 
-const pane = {
+export const diagram = {
+  methods: {
+    getDimensions() {
+      //dimensions and margins
+      const svgWidth = document.querySelector("#" + this.containerId)
+        .clientWidth;
+      const svgHeight = document.querySelector("#" + this.containerId)
+        .clientHeight;
+      const mainMargin = { top: 20, right: 20, bottom: 110, left: 80 };
+      const navMargin = {
+        top: svgHeight - mainMargin.top - 65,
+        right: 20,
+        bottom: 30,
+        left: 80
+      };
+      const width = +svgWidth - mainMargin.left - mainMargin.right;
+      const mainHeight = +svgHeight - mainMargin.top - mainMargin.bottom;
+      const navHeight = +svgHeight - navMargin.top - navMargin.bottom;
+      return { width, mainHeight, navHeight, mainMargin, navMargin };
+    }
+  }
+};
+
+export const pane = {
   computed: {
     paneId() {
       return this.$parent.pane.id;
@@ -37,7 +60,7 @@
   }
 };
 
-const pdfgen = {
+export const pdfgen = {
   methods: {
     addText(position, offset, width, fontSize, color, text) {
       text = this.replacePlaceholders(text);
@@ -171,5 +194,3 @@
     }
   }
 };
-
-export { sortTable, pane, pdfgen };