--- a/client/src/components/gauge/Waterlevel.vue	Thu Oct 17 12:07:06 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Thu Oct 17 12:24:52 2019 +0200
@@ -351,13 +351,33 @@
 
       // scaling helpers
       const scale = this.getScale({ dimensions, extent });
-
+      const dFormat = date => {
+        // make the x-axis label formats dynamic, based on zoom
+        // but never display year numbers since they don't make any sense in
+        // this diagram
+        return (d3.timeSecond(date) < date
+          ? d3.timeFormat(".%L")
+          : d3.timeMinute(date) < date
+          ? d3.timeFormat(":%S")
+          : d3.timeHour(date) < date
+          ? d3.timeFormat("%H:%M")
+          : d3.timeDay(date) < date
+          ? d3.timeFormat("%H")
+          : d3.timeMonth(date) < date
+          ? d3.timeWeek(date) < date
+            ? d3.timeFormat("%a %d")
+            : d3.timeFormat("%b %d")
+          : d3.timeYear(date) < date
+          ? d3.timeFormat("%B")
+          : d3.timeFormat("%Y"))(date);
+      };
       // creating the axes based on the scales
       const axes = {
         x: d3
           .axisTop(scale.x)
           .tickSizeInner(dimensions.mainHeight)
-          .tickSizeOuter(0),
+          .tickSizeOuter(0)
+          .tickFormat(dFormat),
         y: d3
           .axisRight(scale.y)
           .tickSizeInner(dimensions.width)
@@ -368,7 +388,7 @@
           .tickSizeInner(3)
           .tickSizeOuter(0)
           .tickFormat(d => this.$options.filters.waterlevel(d)),
-        x2: d3.axisBottom(scale.x2)
+        x2: d3.axisBottom(scale.x2).tickFormat(dFormat)
       };
 
       // DRAW DIAGRAM/NAVIGATION AREAS