--- a/client/src/components/gauge/HydrologicalConditions.vue	Mon May 13 09:41:35 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Mon May 13 12:42:18 2019 +0200
@@ -57,6 +57,10 @@
         </div>
       </div>
     </div>
+    <div
+      id="tmpContainer"
+      style="position: absolute; z-index: -1; top: 600px;"
+    ></div>
   </div>
 </template>
 
@@ -284,10 +288,29 @@
     addDiagram(position, offset, width, height) {
       let x = offset.x,
         y = offset.y;
+      // check if there are tow diagrams on the screen
+      // draw the diagram in a separated html element to get the full size
+      if (
+        ["GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS"].indexOf(this.paneSetup) !==
+        -1
+      ) {
+        this.containerId = "tmpContainer";
+        // set width and height
+        document.querySelector("#tmpContainer").style.width =
+          document.querySelector("#hydrologicalconditions-diagram-container")
+            .clientWidth *
+            2 +
+          "px";
+        document.querySelector("#tmpContainer").style.height =
+          document.querySelector("#hydrologicalconditions-diagram-container")
+            .clientHeight + "px";
+        this.drawDiagram();
+      }
       var svg = document.getElementById(this.containerId).innerHTML;
       if (svg) {
         svg = svg.replace(/\r?\n|\r/g, "").trim();
       }
+      this.containerId = "hydrologicalconditions-diagram-container";
       var canvas = document.createElement("canvas");
       canvas.width = window.innerWidth;
       canvas.height = window.innerHeight / 2;