--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Wed May 22 15:30:48 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Wed May 22 15:38:21 2019 +0200
@@ -432,6 +432,48 @@
     },
     drawBars() {
       this.drawLNWL();
+      this.drawAFD();
+    },
+    drawAFD() {
+      let afd = this.diagram
+        .append("g")
+        .attr("transform", `translate(${this.paddingRight + this.barsWidth})`);
+      afd
+        .selectAll("rect")
+        .data(this.fwLNWLData.afd)
+        .enter()
+        .append("rect")
+        .on("mouseover", function() {
+          d3.select(this).attr("opacity", "0.8");
+          d3.select("#tooltip").attr("opacity", 1);
+        })
+        .on("mouseout", function() {
+          d3.select(this).attr("opacity", 1);
+          d3.select("#tooltip").attr("opacity", 0);
+        })
+        .on("mousemove", function(d) {
+          let y = d3.mouse(this)[1];
+          const dy = document
+            .querySelector(".diagram-container")
+            .getBoundingClientRect().left;
+          const value = d.percent;
+          d3.select("#tooltip")
+            .text(value)
+            .attr("y", y - 10)
+            .attr("x", d3.event.pageX - dy);
+          //d3.event.pageX gives coordinates relative to SVG
+          //dy gives offset of svg on page
+        })
+        .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, i) => {
+          return this.$options.AFDCOLORS[i];
+        });
     },
     drawLNWL() {
       let lnwl = this.diagram
@@ -507,6 +549,7 @@
       this.drawDiagram();
     }
   },
-  LEGEND: app.$gettext("Percent")
+  LEGEND: app.$gettext("Percent"),
+  AFDCOLORS: ["#33333", "#666666", "#999999"]
 };
 </script>