--- a/client/src/components/gauge/Waterlevel.vue	Thu Sep 12 10:15:25 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Thu Sep 12 10:53:32 2019 +0200
@@ -70,6 +70,17 @@
           </button>
           -->
         </div>
+        <div class="btn-group-toggle w-100 mt-2">
+          <label
+            class="btn btn-outline-secondary btn-sm"
+            :class="{ active: showNSC }"
+            ><input
+              type="checkbox"
+              v-model="showNSC"
+              autocomplete="off"
+            />Nash-Sutcliffe
+          </label>
+        </div>
       </DiagramLegend>
       <div
         class="d-flex flex-fill justify-content-center align-items-center"
@@ -114,6 +125,8 @@
 // d3-line-chunked plugin: https://github.com/pbeshai/d3-line-chunked
 const d3 = Object.assign(d3Base, { lineChunked });
 
+let temp = null;
+
 export default {
   mixins: [diagram, pdfgen, templateLoader, refwaterlevels],
   components: {
@@ -134,7 +147,8 @@
         height: 297
       },
       templateData: null,
-      zoomStore: null
+      zoomStore: null,
+      showNSC: true
     };
   },
   computed: {
@@ -178,6 +192,9 @@
     }
   },
   watch: {
+    showNSC() {
+      this.drawDiagram({ ...this.zoomStore });
+    },
     paneSetup() {
       this.$nextTick(() => this.drawDiagram());
     },
@@ -291,7 +308,7 @@
         }
       };
     },
-    drawDiagram() {
+    drawDiagram(zoom) {
       // remove old diagram and exit if necessary data is missing
       d3.select("#" + this.containerId + " svg").remove();
       const elem = document.querySelector("#" + this.containerId);
@@ -305,7 +322,8 @@
           svgWidth: svgWidth,
           svgHeight: svgHeight,
           ...layout
-        })
+        }),
+        zoomLevel: zoom ? zoom : null
       });
     },
     renderTo({ element, dimensions, zoomLevel }) {
@@ -398,16 +416,17 @@
       // static, don't need updater
       this.drawNavigationChart({ scale, navigation });
       this.drawRefLines({ refWaterLevels, diagram, scale, dimensions, extent });
-
-      updaters.push(
-        this.drawNashSutcliffe({ hours: 72, diagram, scale, dimensions })
-      );
-      updaters.push(
-        this.drawNashSutcliffe({ hours: 48, diagram, scale, dimensions })
-      );
-      updaters.push(
-        this.drawNashSutcliffe({ hours: 24, diagram, scale, dimensions })
-      );
+      if (this.showNSC) {
+        updaters.push(
+          this.drawNashSutcliffe({ hours: 72, diagram, scale, dimensions })
+        );
+        updaters.push(
+          this.drawNashSutcliffe({ hours: 48, diagram, scale, dimensions })
+        );
+        updaters.push(
+          this.drawNashSutcliffe({ hours: 24, diagram, scale, dimensions })
+        );
+      }
 
       // INTERACTIONS
 
@@ -955,14 +974,19 @@
           .call(brush.move, scale.x.range().map(t.invertX, t));
       };
       zoom.on("zoom", () => {
-        if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush")
+        if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") {
           return; // ignore zoom-by-brush
+        }
         let t = d3.event.transform;
+        // set the zoom to the passed zoom level.
         if (zoomLevel) {
-          const tx = (zoomLevel.x * dimensions.width) / zoomLevel.width;
-          const k = zoomLevel.k;
-          const ty = zoomLevel.y;
+          let tx = (zoomLevel.x * dimensions.width) / zoomLevel.width;
+          let k = zoomLevel.k;
+          let ty = zoomLevel.y;
           t = d3.zoomIdentity.translate(tx, ty).scale(k);
+          zoomLevel = null; // avoid to stuck at same zoom level after setting the zoom by subsequent zooming.
+        } else {
+          temp = { ...d3.event.transform, width: dimensions.width };
         }
         scaleForZoom(t);
       });
@@ -971,11 +995,13 @@
         svg.select(".chart-tooltip").style("opacity", 0);
       });
       // store the zoom level after zomming is ended
-      if (!zoomLevel) {
-        zoom.on("end", () => {
-          this.zoomStore = { ...d3.event.transform, width: dimensions.width };
-        });
-      }
+      zoom.on("end", () => {
+        if (!zoomLevel) {
+          this.zoomStore = temp
+            ? temp
+            : { ...d3.event.transform, width: dimensions.width };
+        }
+      });
 
       navigation
         .append("g")