--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Mon Apr 29 16:05:14 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Mon Apr 29 17:06:46 2019 +0200
@@ -62,44 +62,33 @@
       const paddingRight = 100;
       const paddingTop = 30;
 
-      const bars = diagram
+      const allBars = diagram
         .selectAll("g")
         .data(data)
         .enter()
         .append("g")
         .attr("transform", (d, i) => {
-          return (
-            "translate(" + (paddingRight + i * 60) + "," + yScale(-1) + ")"
-          );
+          return "translate(" + (paddingRight + i * 95) + " 10 )";
         });
-      const bar = bars.append("g");
-
-      bar
+      const barPerMonth = allBars
         .selectAll("rect")
         .data(d => d.values)
         .enter()
         .append("rect")
-        .attr("width", 30)
-        .attr("height", (d, i) => {
-          console.log(d);
-          return yScale(0) - yScale(d);
+        .attr("x", 0)
+        .attr("y", yScale(0))
+        .attr("height", d => {
+          return Math.abs(yScale(0) - yScale(d));
         })
         .attr("transform", d => {
-          return "translate(0 -" + (yScale(0) - yScale(d)) + ")";
+          if (d > 0)
+            return "translate(0 -" + Math.abs(yScale(0) - yScale(d)) + ")";
+          return "translate(0 " + 0 + ")";
         })
+        .attr("width", 60)
         .attr("fill", (d, i) => {
           return colors[i];
         });
-
-      bars
-        .append("text")
-        .text((d, i) => {
-          return d.month;
-        })
-        .attr("text-anchor", "middle")
-        .attr("x", 15)
-        .attr("y", 0)
-        .attr("dy", "1em");
     },
     drawLabel(diagram, height) {
       const dy = height / 2;