--- a/client/src/components/gauge/Waterlevel.vue	Tue Oct 29 11:04:14 2019 +0100
+++ b/client/src/components/gauge/Waterlevel.vue	Tue Oct 29 16:29:29 2019 +0100
@@ -217,6 +217,49 @@
     }
   },
   methods: {
+    addLegendToCanvas(ctx, { width, height }) {
+      let x = width / 10,
+        y = height - 25;
+      ctx.font = "12px sans-serif";
+      ctx.textAlign = "start";
+
+      ctx.beginPath();
+      ctx.fillStyle = "steelblue";
+      ctx.strokeStyle = "white";
+      ctx.arc(x, y, 8, 0, 2 * Math.PI);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "black";
+      ctx.fillText(this.$gettext("Waterlevel"), x + 14, y + 5);
+      ctx.closePath();
+
+      ctx.beginPath();
+      ctx.fillStyle = "#90b4d2";
+      ctx.strokeStyle = "#90b4d2";
+      ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
+      ctx.fill();
+      ctx.stroke();
+      ctx.closePath();
+      ctx.beginPath();
+      ctx.fillStyle = "#4682B4";
+      ctx.strokeStyle = "#4682B4";
+      ctx.arc(x, y, 2, 0, 2 * Math.PI);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "black";
+      ctx.fillText(this.$gettext("prediction"), x + 14, y + 5);
+      ctx.closePath();
+
+      ctx.beginPath();
+      ctx.fillStyle = "rgba(0, 255, 0, 0.1)";
+      ctx.strokeStyle = "rgba(0, 255, 0, 0.1)";
+      ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "black";
+      ctx.fillText(this.$gettext("Navigable Range"), x + 14, y + 5);
+      ctx.closePath();
+    },
     initialDiagramValues() {
       this.dateFromD = this.dateFrom;
       this.dateToD = this.dateTo;