--- a/client/src/components/gauge/HydrologicalConditions.vue	Tue Oct 29 11:04:14 2019 +0100
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Tue Oct 29 16:29:29 2019 +0100
@@ -222,6 +222,61 @@
     }
   },
   methods: {
+    addLegendToCanvas(ctx, { width, height }) {
+      let x = width / 12,
+        y = height - 25;
+      ctx.font = "12px sans-serif";
+      ctx.textAlign = "start";
+      ctx.beginPath();
+      ctx.fillStyle = "red";
+      ctx.strokeStyle = "red";
+      ctx.arc(x, y, 8, 0, 2 * Math.PI);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "black";
+      ctx.fillText(this.yearCompare, x + 14, y + 5);
+      ctx.closePath();
+
+      ctx.beginPath();
+      ctx.fillStyle = "orange";
+      ctx.strokeStyle = "orange";
+      ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "black";
+      ctx.fillText(this.$gettext("Q25%"), x + 14, y + 5);
+      ctx.closePath();
+
+      ctx.beginPath();
+      ctx.fillStyle = "black";
+      ctx.strokeStyle = "black";
+      ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "black";
+      ctx.fillText(this.$gettext("Median"), x + 14, y + 5);
+      ctx.closePath();
+
+      ctx.beginPath();
+      ctx.fillStyle = "purple";
+      ctx.strokeStyle = "purple";
+      ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "black";
+      ctx.fillText(this.$gettext("Q75%"), x + 14, y + 5);
+      ctx.closePath();
+
+      ctx.beginPath();
+      ctx.fillStyle = "lightsteelblue";
+      ctx.strokeStyle = "lightsteelblue";
+      ctx.arc(x, (y += 20), 8, 0, 2 * Math.PI);
+      ctx.fill();
+      ctx.stroke();
+      ctx.fillStyle = "black";
+      ctx.fillText(this.$gettext("Long-term Amplitude"), x + 14, y + 5);
+      ctx.closePath();
+    },
     initialDiagramValues() {
       this.selectedGaugeD = this.selectedGauge;
       this.longtermIntervalD = this.longtermInterval;