--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Thu Sep 12 10:53:32 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Thu Sep 12 11:45:40 2019 +0200
@@ -100,6 +100,13 @@
   },
   data() {
     return {
+      selectedFairwayAvailabilityFeatureD: null,
+      fromDate: null,
+      toDate: null,
+      depthlimit1D: null,
+      depthlimit2D: null,
+      widthlimit1D: null,
+      widthlimit2D: null,
       containerId: "availablefairwaydepth-diagram-container",
       resizeListenerFunction: null,
       loading: false,
@@ -136,7 +143,7 @@
     // not guarantee that the DOM is not only updated but also re-painted on the
     // screen.
     setTimeout(this.drawDiagram, 150);
-
+    this.initDiagramValues();
     this.templates[0] = this.defaultTemplate;
     this.form.template = this.templates[0];
     this.templateData = this.form.template;
@@ -176,12 +183,12 @@
       "widthlimit2"
     ]),
     legend() {
-      const d = [this.depthlimit1, this.depthlimit2].sort();
-      const w = [this.widthlimit1, this.widthlimit2].sort();
+      const d = [this.depthlimit1D, this.depthlimit2D].sort();
+      const w = [this.widthlimit1D, this.widthlimit2D].sort();
       const lowerBound = [d[0], w[0]].filter(x => x).join(", ");
       const upperBound = [d[1], w[1]].filter(x => x).join(", ");
       let result;
-      if (this.depthlimit1 !== this.depthlimit2) {
+      if (this.depthlimit1D !== this._depthlimit2D) {
         result = [
           `> LDC`,
           `>= ${upperBound}`,
@@ -211,12 +218,6 @@
       };
       return frequencies[this.frequency];
     },
-    fromDate() {
-      return this.from;
-    },
-    toDate() {
-      return this.to;
-    },
     availability() {
       return this.plainAvailability;
     },
@@ -228,11 +229,20 @@
       )}) ${this.$gettext(this.frequency)}`;
     },
     featureName() {
-      if (this.selectedFairwayAvailabilityFeature == null) return "";
-      return this.selectedFairwayAvailabilityFeature.properties.name;
+      if (this.selectedFairwayAvailabilityFeatureD == null) return "";
+      return this.selectedFairwayAvailabilityFeatureD.properties.name;
     }
   },
   methods: {
+    initDiagramValues() {
+      this.selectedFairwayAvailabilityFeatureD = this.selectedFairwayAvailabilityFeature;
+      this.fromDate = this.from;
+      this.toDate = this.to;
+      this.depthlimit1D = this.depthlimit1;
+      this.depthlimit2D = this.depthlimit2;
+      this.widthlimit1D = this.widthlimit1;
+      this.widthlimit2D = this.widthlimit2;
+    },
     applyChange() {
       if (this.form.template.hasOwnProperty("properties")) {
         this.templateData = this.defaultTemplate;
@@ -322,7 +332,7 @@
       }
     },
     legendStyle(index) {
-      if (this.depthlimit1 === this.depthlimit2) {
+      if (this._depthlimit1 === this._depthlimit2) {
         let result = [
           `background-color: ${this.$options.COLORS.LDC};`,
           `background-color: ${this.$options.COLORS.HIGHEST};`
@@ -702,6 +712,7 @@
   },
   watch: {
     fwData() {
+      this.initDiagramValues();
       this.drawDiagram();
     },
     showNumbers() {