--- a/client/src/components/gauge/HydrologicalConditions.vue	Tue Jul 09 17:00:33 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Tue Jul 09 17:12:58 2019 +0200
@@ -243,12 +243,20 @@
     addDiagram(position, offset, width, height) {
       let x = offset.x,
         y = offset.y;
+      const svgWidth = 1550;
+      const svgHeight = 400;
       // check if there are tow diagrams on the screen
       // draw the diagram in a separated html element to get the full size
       const offScreen = document.querySelector("#offScreen");
-      offScreen.style.width = "1550px";
-      offScreen.style.height = "400px";
-      this.renderTo(offScreen);
+      offScreen.style.width = `${svgWidth}px`;
+      offScreen.style.height = `${svgHeight}px`;
+      this.renderTo({
+        element: offScreen,
+        dimensions: this.getDimensions({
+          svgWidth: svgWidth,
+          svgHeight: svgHeight
+        })
+      });
       var svg = offScreen.querySelector("svg");
       // use default width,height if they are missing in the template definition
       if (!width) {
@@ -336,9 +344,15 @@
       // remove old diagram
       d3.select("#" + this.containerId + " svg").remove();
       if (!this.selectedGauge || !this.longtermWaterlevels.length) return;
-      this.renderTo("#" + this.containerId);
+      this.renderTo({
+        element: `#${this.containerId}`,
+        dimensions: this.getDimensions({
+          svgWidth: document.querySelector("#" + this.containerId).clientWidth,
+          svgHeight: document.querySelector("#" + this.containerId).clientHeight
+        })
+      });
     },
-    renderTo(element) {
+    renderTo({ element, dimensions }) {
       // PREPARE HELPERS
 
       // HDC/LDC/MW for the selected gauge
@@ -347,7 +361,6 @@
       );
 
       // dimensions (widths, heights, margins)
-      const dimensions = this.getDimensions();
 
       // get min/max values for date and waterlevel axis
       const extent = this.getExtent(refWaterLevels);
@@ -544,12 +557,7 @@
         .attr("fill", "666")
         .style("font-size", "0.8em");
     },
-    getDimensions() {
-      // dimensions and margins
-      const svgWidth = document.querySelector("#" + this.containerId)
-        .clientWidth;
-      const svgHeight = document.querySelector("#" + this.containerId)
-        .clientHeight;
+    getDimensions({ svgWidth, svgHeight }) {
       const mainMargin = { top: 20, right: 20, bottom: 110, left: 80 };
       const navMargin = {
         top: svgHeight - mainMargin.top - 65,