--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Wed May 22 08:53:43 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Wed May 22 09:33:40 2019 +0200
@@ -4,14 +4,7 @@
     <UISpinnerOverlay v-if="loading" />
     <div class="d-flex flex-fill">
       <DiagramLegend>
-        <div v-for="(entry, index) in legend" :key="index" class="legend">
-          <span
-            :style="
-              `${legendStyle(
-                index
-              )}; border-radius: 0.25rem; width: 40px; height: 20px;`
-            "
-          ></span>
+        <div v-for="(entry, index) in legendLNWL" :key="index" class="legend">
           {{ entry }}
         </div>
         <div>
@@ -173,7 +166,7 @@
       "from",
       "to",
       "frequency",
-      "legend"
+      "legendLNWL"
     ]),
     ...mapState("user", ["user"]),
     fromDate() {
@@ -401,12 +394,6 @@
       this.pdf.doc.rect(x, y + 20, 8, 4, "FD");
       this.pdf.doc.text(">= 250.00 [h]", x + 10, y + 23);
     },
-    legendStyle(index) {
-      if (index == 0) return `background-color: ${this.$options.COLORS.LDC};`;
-      if (index < 4)
-        return `background-color: ${this.$options.COLORS.REST[index - 1]};`;
-      return `background-color: ${this.$options.COLORS.HIGHEST};`;
-    },
     close() {
       this.$store.commit("application/paneSetup", "DEFAULT");
     },
@@ -467,11 +454,6 @@
       this.drawDiagram();
     }
   },
-  LEGEND: app.$gettext("Percent"),
-  COLORS: {
-    LDC: "#cdcdcd",
-    HIGHEST: "#3675ff",
-    REST: ["#782121", "#ff6c6c", "#ffaaaa"]
-  }
+  LEGEND: app.$gettext("Percent")
 };
 </script>

--- a/client/src/store/fairwayavailability.js	Wed May 22 08:53:43 2019 +0200
+++ b/client/src/store/fairwayavailability.js	Wed May 22 09:33:40 2019 +0200
@@ -35,6 +35,7 @@
     fwData: null,
     fwLNWLData: null,
     fwLNWLOverviewData: [],
+    legendLNWL: null,
     legend: null,
     LOS: 3
   };
@@ -101,6 +102,9 @@
         entry = entry.replace("[h]", "").trim(); // omit unit
         return entry;
       });
+    },
+    setLegendLNWL: (state, headerLNWL) => {
+      this.headerLNWL = headerLNWL;
     }
   },
   actions: {