(Einfache) JavaScript Library (pure), um Line Chart mit Dates zu zeichnen

Moin, ich kenne mich mit Frontend nicht so gut aus, versucht hatte ich Folgendes:

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

<head>
  <meta charset="utf-8">
  <title>Chart(s)</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="dist/chart.umd.js"></script>
</head>

<body>
  <header></header>
  <main>
    <div>
      <canvas id="chart1" width="600" height="600"></canvas>
    </div>
  </main>
  <footer></footer>
  <script>
    function loadChart(id, fn) {
      fetch(fn)
        .then(res => res.json())
        .then(data => {
          for (let i = 0; i < data.length; i++) {
            let e = data[i];
            e.t = new Date(e.x);
          }
          console.log(data);
          let config1 = {
            type: "line",
            options: {
              scales: {
                xAxes: [{
                  type: "time",
                }]
              }
            },
            datasets: [{
              data: data
            }],
            options: {
              responsive: true,
              plugins: {
                legend: {
                  position: "top",
                },
                title: {
                  display: true,
                  text: "Sums Line Chart"
                }
              }
            },
          };
          let ctx1 = document.getElementById(id).getContext("2d");
          new Chart(ctx1, config1);
        });
    }
    loadChart("chart1", "./sums.json");
  </script>
</body>

</html>

In der Konsole wird auch brav das Data-Json ausgegeben: https://i.postimg.cc/ZYNNBYPf/grafik.png

Zu sehen ist aber NIX!!!

Gibt es nicht eine einfache JS-Library, die das kann? Alternativ würde ich halt den Chart als PNG im Backend (vor-)rendern und ganz auf JS verzichten...

Hier noch zwei Links zu der bisherigen Library (die mir eigentlich gar nicht geholfen hatten):

https://www.chartjs.org/docs/latest/charts/line.html
https://stackoverflow.com/questions/47875045/chart-js-creating-a-line-graph-using-dates

Hat schon geklappt https://i.postimg.cc/xdDLyYBR/grafik.png

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

<head>
  <meta charset="utf-8">
  <title>Chart(s)</title>
  <script type="text/javascript" src="https://unpkg.com/dygraphs@2.2.1/dist/dygraph.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/dygraphs@2.2.1/dist/dygraph.min.css" />
</head>

<body>
  <header></header>
  <main>
    <div id="chart1" width="600" height="600"></div>
  </main>
  <footer></footer>
  <script>
    function loadChart(id, fn) {
      fetch(fn)
        .then(res => res.json())
        .then(data => {
          let data2 = [];
          for (let i = 0; i < data.length; i++) {
            let e = data[i];
            data2.push([new Date(e.x), e.y]);
          }
          console.log(data);
          console.log(data2);

          let g = new Dygraph(document.getElementById(id), data2, {
            legend: "always",
            title: fn,
            labels: ["x", "A"],
          });
        });
    }
    loadChart("chart1", "./sums.json");
  </script>
</body>

</html>

Merke: Verwende am besten niemals eine Library, die nicht open source ist...