--- a/client/src/components/fairway/AvailableFairwayDepthDialogue.vue	Wed May 22 10:47:04 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthDialogue.vue	Wed May 22 11:00:25 2019 +0200
@@ -428,7 +428,7 @@
     openFairwaydepthLNWLDiagram() {
       this.loading = true;
       this.$store
-        .dispatch("fairwayavailability/loadAvailableFairwayDepth", {
+        .dispatch("fairwayavailability/loadAvailableFairwayDepthLNWLDiagram", {
           feature: this.selectedFairwayAvailabilityFeature,
           from: this.from,
           to: this.to,

--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Wed May 22 10:47:04 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Wed May 22 11:00:25 2019 +0200
@@ -421,7 +421,30 @@
         .append("g")
         .attr("transform", `translate(0 ${this.paddingTop})`);
     },
-    drawBars() {},
+    drawBars() {
+      this.drawLNWL();
+    },
+    drawLNWL() {
+      let lnwl = this.diagram
+        .append("g")
+        .attr("transform", `translate(${this.paddingRight})`);
+      lnwl
+        .selectAll("rect")
+        .data(this.fwLNWLData.lnwl)
+        .enter()
+        .append("rect")
+        .attr("height", d => {
+          return this.yScale(0) - this.yScale(d.percent);
+        })
+        .attr("y", d => {
+          return this.yScale(d.translateY);
+        })
+        .attr("width", this.barsWidth)
+        .attr("fill", d => {
+          if (d.level === "LDC") return "#aaaaaa";
+          return "#3333cc";
+        });
+    },
     drawScaleLabel() {
       const center = this.dimensions.mainHeight / 2;
       this.diagram

--- a/client/src/store/fairwayavailability.js	Wed May 22 10:47:04 2019 +0200
+++ b/client/src/store/fairwayavailability.js	Wed May 22 11:00:25 2019 +0200
@@ -15,6 +15,18 @@
 import { HTTP } from "@/lib/http";
 import { format, subYears } from "date-fns";
 
+const LNWLDIAGRAMMOCKDATA = {
+  lnwl: [
+    { level: "LDC", value: 162, percent: 40 },
+    { level: "HDC", value: 564, percent: 60 }
+  ],
+  afd: [
+    { value: 200, percent: 30 },
+    { value: 230, percent: 50 },
+    { value: 250, percent: 20 }
+  ]
+};
+
 const FREQUENCIES = {
   MONTHLY: "monthly",
   QUARTERLY: "quarterly",
@@ -86,6 +98,9 @@
     setFwData: (state, fwData) => {
       state.fwData = fwData;
     },
+    setFwLNWLData: (state, fwLNWLData) => {
+      state.fwLNWLData = fwLNWLData;
+    },
     addFwLNWLOverviewData: (state, data) => {
       let existingIndex = state.fwLNWLOverviewData.findIndex(
         d => d.feature.get("id") === data.feature.get("id")
@@ -179,6 +194,21 @@
             reject(error);
           });
       });
+    },
+    loadAvailableFairwayDepthLNWLDiagram: ({ commit, dispatch }, options) => {
+      dispatch("loadAvailableFairwayDepthLNWL", options).then(response => {
+        //const data = response;
+        let data = LNWLDIAGRAMMOCKDATA;
+        Object.keys(data).forEach(diagramComponent => {
+          let sum = 0;
+          data[diagramComponent].map(elem => {
+            elem["translateY"] = Number(elem["percent"]) + sum;
+            sum += Number(elem["percent"]);
+            return elem;
+          });
+        });
+        commit("setFwLNWLData", data);
+      });
     }
   }
 };