JSFiddle - React, Tailwind, and code Playground

by Black Label

HTML

<!DOCTYPE html>
<html lang="de-de">

<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/datagrouping.js"></script>
<script src="https://code.highcharts.com/modules/windbarb.js"></script>
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<body>
<div id="bskychart"></div>
</body>
</html>

JavaScript

fetch(
  "https://api.brightsky.dev/weather?lat=51.0893572&lon=14.4402116&date=2025-02-15&last_date=2025-02-23",
)
  .then((response) => response.json())
  .then((data) => {
    const weatherData = data.weather

    const temperatureData = weatherData.map((entry) => ({
      x: new Date(entry.timestamp).getTime(),
      y: entry.temperature,
    }))

    const pressureData = weatherData.map((entry) => ({
      x: new Date(entry.timestamp).getTime(),
      y: entry.pressure_msl,
    }))

    Highcharts.chart("bskychart", {
      chart: {
        type: "line",
      },
      title: {
        text: "Wettervorhersage (BrightSky)",
      },
      xAxis: {
        type: "datetime",
        labels: {
          formatter: function () {
            return new Date(this.value).toLocaleString("de-DE", {
              weekday: "short",
              hour: "2-digit",
              minute: "2-digit",
              day: "2-digit",
              month: "2-digit",
              year: "numeric",
            })
          },
        },
      },
      yAxis: [
        {
          title: {
            text: "Temperatur (°C)",
          },
        },
        {
          title: {
            text: "Luftdruck (hPa)",
          },
          opposite: true,
        },
      ],
      series: [
        {
          name: "Temperatur",
          data: temperatureData,
          tooltip: {
            valueSuffix: " °C",
          },
        },
        {
          name: "Luftdruck",
          data: pressureData,
          yAxis: 1,
          tooltip: {
            valueSuffix: " hPa",
          },
        },
      ],
    })
  })
  .catch((error) =>
    console.error("Fehler beim Abrufen der Wetterdaten:", error),
  )