--- a/client/src/components/gauge/Waterlevel.vue	Mon Aug 19 12:27:19 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Mon Aug 19 12:55:23 2019 +0200
@@ -134,7 +134,8 @@
         width: 420,
         height: 297
       },
-      templateData: null
+      templateData: null,
+      zoomStore: null
     };
   },
   computed: {
@@ -308,9 +309,8 @@
         })
       });
     },
-    renderTo({ element, dimensions }) {
+    renderTo({ element, dimensions, zoomLevel }) {
       // PREPARE HELPERS
-
       // HDC/LDC/MW for the selected gauge
       const refWaterLevels = JSON.parse(
         this.selectedGauge.properties.reference_water_levels
@@ -430,7 +430,8 @@
         dimensions,
         scale,
         navigation,
-        svg
+        svg,
+        zoomLevel
       });
       this.createTooltips({ eventRect, diagram, scale, dimensions });
       this.setInlineStyles(svg);
@@ -899,7 +900,15 @@
           .call(nashSutcliffeLabel, dateNow, hours);
       };
     },
-    createZoom({ updaters, eventRect, dimensions, scale, navigation, svg }) {
+    createZoom({
+      updaters,
+      eventRect,
+      dimensions,
+      scale,
+      navigation,
+      svg,
+      zoomLevel
+    }) {
       const brush = d3
         .brushX()
         .handleSize(4)
@@ -927,22 +936,42 @@
               .translate(-s[0], 0)
           );
       });
-
-      zoom.on("zoom", () => {
-        if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush")
-          return; // ignore zoom-by-brush
-        let t = d3.event.transform;
+      let scaleForZoom = t => {
         scale.x.domain(t.rescaleX(scale.x2).domain());
         updaters.forEach(u => u && u());
         this.setInlineStyles(svg);
         navigation
           .select(".brush")
           .call(brush.move, scale.x.range().map(t.invertX, t));
+      };
+      zoom.on("zoom", () => {
+        if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush")
+          return; // ignore zoom-by-brush
+        let t = d3.event.transform;
+        // Set the last zoom level and recalculate x for pdf-export
+        if (zoomLevel) {
+          t.x = (zoomLevel.x * dimensions.width) / zoomLevel.width;
+          t.k = zoomLevel.k;
+          t.y = zoomLevel.y;
+          scaleForZoom(t);
+          // reset zoomming after drawing for pdf
+          t.k = 1;
+          t.x = 0;
+          t.y = 0;
+        } else {
+          scaleForZoom(t);
+        }
       });
       zoom.on("start", () => {
         svg.select(".chart-dot").style("opacity", 0);
         svg.select(".chart-tooltip").style("opacity", 0);
       });
+      // store the zoom level after zomming is ended
+      if (!zoomLevel) {
+        zoom.on("end", () => {
+          this.zoomStore = { ...d3.event.transform, width: dimensions.width };
+        });
+      }
 
       navigation
         .append("g")

--- a/client/src/lib/mixins.js	Mon Aug 19 12:27:19 2019 +0200
+++ b/client/src/lib/mixins.js	Mon Aug 19 12:55:23 2019 +0200
@@ -171,6 +171,7 @@
       const offScreen = document.querySelector("#offScreen");
       offScreen.style.width = `${svgWidth}px`;
       offScreen.style.height = `${svgHeight}px`;
+      let zoomLevel = this.zoomStore;
       const layout = this.getPrintLayout(svgHeight, svgWidth);
       this.renderTo({
         element: offScreen,
@@ -178,7 +179,8 @@
           svgWidth: svgWidth,
           svgHeight: svgHeight,
           ...layout
-        })
+        }),
+        zoomLevel // passing the zoom level to draw the diagram on pdf at this point
       });
       var svg = offScreen.querySelector("svg");
       if (["topright", "bottomright"].indexOf(position) !== -1) {