--- a/client/src/components/gauge/HydrologicalConditions.vue	Fri Apr 12 11:41:24 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Fri Apr 12 11:48:55 2019 +0200
@@ -18,6 +18,15 @@
         <span style="background-color: lightsteelblue"></span>
         Long-term Amplitude
       </div>
+      <div>
+        <button
+          @click="downloadPDF"
+          type="button"
+          class="btn btn-sm btn-info d-block w-100 mt-2"
+        >
+          <translate>Export to PDF</translate>
+        </button>
+      </div>
     </DiagramLegend>
     <div
       class="d-flex flex-fill justify-content-center align-items-center diagram-container"
@@ -130,6 +139,8 @@
 import * as d3 from "d3";
 import debounce from "debounce";
 import { startOfYear, endOfYear } from "date-fns";
+import jsPDF from "jspdf";
+import canvg from "canvg";
 
 export default {
   components: {
@@ -155,6 +166,25 @@
     ...mapGetters("gauges", ["selectedGauge"])
   },
   methods: {
+    downloadPDF() {
+      var svg = this.svg._groups[0][0].outerHTML;
+      console.log(this.svg);
+      if (svg) {
+        svg = svg.replace(/\r?\n|\r/g, "").trim();
+      }
+      var pdf = new jsPDF("p", "pt", "c2");
+      var canvas = document.createElement("canvas");
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight / 2;
+      canvg(canvas, svg, {
+        ignoreMouse: true,
+        ignoreAnimation: true,
+        ignoreDimensions: true
+      });
+      var imgData = canvas.toDataURL("image/png");
+      pdf.addImage(imgData, "PNG", 50, 200);
+      pdf.save("Hydrological condition Diagram.pdf");
+    },
     drawDiagram() {
       // remove old diagram
       d3.select(".diagram-container svg").remove();
@@ -253,6 +283,80 @@
 
       this.createZoom(updaters, eventRect);
       this.createTooltips(eventRect);
+      this.setInlineStyles();
+    },
+    setInlineStyles() {
+      this.svg.selectAll(".hide").attr("fill-opacity", 0);
+      this.svg
+        .selectAll(".line")
+        .attr("clip-path", "url(#clip)")
+        .attr("stroke-width", 2)
+        .attr("fill", "none");
+      this.svg
+        .selectAll(".line")
+        .selectAll(".mean")
+        .attr("stroke", "red");
+      this.svg
+        .selectAll(".line")
+        .selectAll(".median")
+        .attr("stroke", "black");
+      this.svg
+        .selectAll(".line")
+        .selectAll(".q25")
+        .attr("stroke", "orange");
+      this.svg
+        .selectAll(".line")
+        .selectAll(".q75")
+        .attr("stroke", "purple");
+      this.svg
+        .selectAll(".area")
+        .attr("clip-path", "url(#clip)")
+        .attr("stroke", "none")
+        .attr("fill", "lightsteelblue");
+      this.svg
+        .selectAll(".hdc-line, .ldc-line, .mw-line")
+        .attr("stroke-width", 1)
+        .attr("fill", "none")
+        .attr("clip-path", "url(#clip)");
+      this.svg.selectAll(".hdc-line").attr("stroke", "red");
+      this.svg.selectAll(".ldc-line").attr("stroke", "green");
+      this.svg.selectAll(".mw-line").attr("stroke", "grey");
+      this.svg
+        .selectAll(".ref-waterlevel-label")
+        .attr("font-size", "11px")
+        .attr("fill", "#999");
+      this.svg
+        .selectAll(".now-line")
+        .attr("stroke", "#999")
+        .attr("stroke-width", 1)
+        .attr("stroke-dasharray", "5, 5")
+        .attr("clip-path", "url(#clip)");
+      this.svg
+        .selectAll(".now-line-label")
+        .attr("fill", "#999")
+        .attr("font-size", "11px");
+      this.svg
+        .selectAll(".tick line")
+        .attr("stroke-dasharray", 5)
+        .attr("stroke", " #ccc");
+      this.svg.selectAll(".tick text").attr("fill", "black");
+      this.svg.selectAll(".domain").attr("stroke", "black");
+
+      this.svg
+        .selectAll(".zoom")
+        .attr("cursor", "move")
+        .attr("fill", "none")
+        .attr("pointer-events", "all");
+      this.svg
+        .selectAll(".brush")
+        .selectAll(".selection")
+        .attr("stroke", "none")
+        .attr("fill-opacity", 0.2);
+      this.svg
+        .selectAll(".brush")
+        .selectAll(".handle")
+        .attr("stroke", "rgba(23, 162, 184, 0.5)")
+        .attr("fill", "rgba(23, 162, 184, 0.5)");
     },
     getDimensions() {
       // dimensions and margins