--- a/client/src/components/gauge/Waterlevel.vue	Thu Mar 14 13:16:43 2019 +0100
+++ b/client/src/components/gauge/Waterlevel.vue	Thu Mar 14 13:36:13 2019 +0100
@@ -31,6 +31,8 @@
     .ref-waterlevel-label
       font-size: 11px
       fill: #999
+    .hdc-ldc-area
+      fill: rgba(0, 255, 0, 0.15)
     .brush
       .selection
         stroke: transparent
@@ -176,14 +178,16 @@
         .attr("transform", `translate(-45, ${mainHeight / 2}) rotate(-90)`);
       mainChart.append("g").call(yAxis);
 
-      // waterlevel chart
+      // reference waterlevels
+      // filling area between HDC and LDC
       mainChart
-        .append("path")
-        .datum(this.waterlevels)
-        .attr("class", "line")
-        .attr("d", mainLineChart);
+        .append("rect")
+        .attr("class", "hdc-ldc-area")
+        .attr("x", 0)
+        .attr("y", y(refWaterLevels.HDC))
+        .attr("width", width)
+        .attr("height", y(refWaterLevels.LDC) - y(refWaterLevels.HDC));
 
-      // reference waterlevels
       let lastDate = this.waterlevels[this.waterlevels.length - 1].date;
       // HDC
       mainChart
@@ -231,6 +235,13 @@
         .attr("x", x(lastDate) - 20)
         .attr("y", y(refWaterLevels.MW) - 3);
 
+      // waterlevel chart
+      mainChart
+        .append("path")
+        .datum(this.waterlevels)
+        .attr("class", "line")
+        .attr("d", mainLineChart);
+
       // DRAWING NAVCHART
 
       let navChart = svg