Headerline sieht gut aus

Rest funktioniert so la la

frontend/src/components/WeatherDashboard.jsx

@@ -3,6 +3,7 @@ import {
   Chart as ChartJS,
   CategoryScale,
   LinearScale,
+  TimeScale,
   PointElement,
   LineElement,
   Title,
@@ -10,6 +11,7 @@ import {
   Legend,
   Filler
 } from 'chart.js'
+import 'chartjs-adapter-date-fns'
 import { Line } from 'react-chartjs-2'
 import { format } from 'date-fns'
 import { de } from 'date-fns/locale'
@@ -18,6 +20,7 @@ import './WeatherDashboard.css'
 ChartJS.register(
   CategoryScale,
   LinearScale,
+  TimeScale,
   PointElement,
   LineElement,
   Title,
@@ -70,11 +73,41 @@ const WeatherDashboard = ({ data }) => {
     scales: {
       x: {
         grid: {
-          display: false,
+          display: true,
+          color: 'rgba(0, 0, 0, 0.1)',
         },
         ticks: {
-          maxTicksLimit: 12,
-        }
+          type: 'time',
+          time: {
+            unit: 'hour',
+            stepSize: 4
+          },
+          ticks: {
+            autoSkip: false
+          }
+/*         
+          maxRotation: 0,
+          autoSkip: false,
+          callback: function(value, index) {
+            if (sortedData.length === 0) return ''
+            
+            const date = new Date(sortedData[index]?.datetime)
+            const hours = date.getHours()
+            const minutes = date.getMinutes()
+            
+            // Berechne die nächste 4-Stunden-Zeit
+            const nearestFourHour = Math.round(hours / 4) * 4
+            
+            // Wenn die Stunde durch 4 teilbar ist UND die Minuten <= 2 sind (also 00:00, 00:05 zählen),
+            // dann ist dies der Datenpunkt, der der 4-Stunden-Zeit am nächsten liegt
+            if (hours % 4 === 0 && minutes <= 2) {
+              return format(new Date(date.getFullYear(), date.getMonth(), date.getDate(), hours, 0), 'HH:mm', { locale: de })
+            }
+            
+            return ''
+          }
+*/            
+        }        
       },
       y: {
         grid: {