--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Fri Jul 05 11:57:18 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Fri Jul 05 11:58:29 2019 +0200
@@ -545,7 +545,8 @@
         .attr("x", 0)
         .attr("y", 0)
         .attr("dy", "10")
-        .attr("transform", `translate(0, ${center}), rotate(-90)`);
+        // translate a few mm to the right to allow for slightly higher letters
+        .attr("transform", `translate(2, ${center}), rotate(-90)`);
     },
     drawScale() {
       const yAxis = d3.axisLeft().scale(this.yScale);

--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Fri Jul 05 11:57:18 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Fri Jul 05 11:58:29 2019 +0200
@@ -74,8 +74,8 @@
 import app from "@/main";
 import debounce from "debounce";
 import { mapState } from "vuex";
+import svg2pdf from "svg2pdf.js";
 import filters from "@/lib/filters.js";
-import canvg from "canvg";
 import { diagram, pdfgen, templateLoader } from "@/lib/mixins";
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
@@ -115,7 +115,7 @@
           {
             type: "diagram",
             position: "topleft",
-            offset: { x: 20, y: 60 },
+            offset: { x: 20, y: 30 },
             width: 290,
             height: 100
           },
@@ -129,7 +129,7 @@
           {
             type: "diagramlegend",
             position: "topleft",
-            offset: { x: 30, y: 160 },
+            offset: { x: 30, y: 170 },
             color: "black"
           }
         ]
@@ -297,10 +297,9 @@
     addDiagram(position, offset, width, height) {
       let x = offset.x,
         y = offset.y;
-      var svg = this.$refs.diagramContainer.innerHTML;
-      if (svg) {
-        svg = svg.replace(/\r?\n|\r/g, "").trim();
-      }
+
+      var svgElement = this.$refs.diagramContainer.firstElementChild;
+
       // use default width,height if they are missing in the template definition
       if (!width) {
         width = this.templateData.properties.paperSize === "a3" ? 380 : 290;
@@ -314,16 +313,12 @@
       if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
         y = this.pdf.height - offset.y - height;
       }
-      var canvas = document.createElement("canvas");
-      canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight / 2;
-      canvg(canvas, svg, {
-        ignoreMouse: true,
-        ignoreAnimation: true,
-        ignoreDimensions: true
+
+      svg2pdf(svgElement, this.pdf.doc, {
+        xOffset: x,
+        yOffset: y,
+        scale: 0.4 // TODO depend on the size and aspect ration on paper
       });
-      var imgData = canvas.toDataURL("image/png");
-      this.pdf.doc.addImage(imgData, "PNG", x, y, width, height);
     },
     addDiagramLegend(position, offset, color) {
       let x = offset.x,
@@ -410,7 +405,7 @@
         .append("text")
         .text(date)
         .attr("text-anchor", "middle")
-        .attr("font-size", "smaller")
+        .attr("font-size", "9")
         .attr(
           "transform",
           `translate(${this.scalePaddingLeft +
@@ -523,8 +518,9 @@
         .attr("text-anchor", "middle")
         .attr("x", 0)
         .attr("y", 0)
-        .attr("dy", "1em")
-        .attr("transform", `translate(0, ${center}), rotate(-90)`);
+        .attr("dy", "10")
+        // translate a few mm to the right to allow for slightly higher letters
+        .attr("transform", `translate(2, ${center}), rotate(-90)`);
     },
     drawScale() {
       const yAxis = d3.axisLeft().scale(this.yScale);