JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>

<canvas id="lineChart"></canvas>

JavaScript

// 気象庁のAPIから天気JSONファイルを読み取る
const KYOTOareaCODE = 260000;
const TOKYOareaCODE = 130000;
const url = `https://www.jma.go.jp/bosai/forecast/data/forecast/${KYOTOareaCODE}.json`;

// JSONデータ取得後に呼び出す関数
function formatWeather(weather){
	//まずAPIのデータから一週間の天気予報を抽出
	const weeklyForecast = weather[1].timeSeries[1];
  
  //ここでは、ラベルとなる日付と最低気温、最高気温を抽出
  const timeStamps = weeklyForecast.timeDefines;
  const tempsMin = weeklyForecast.areas[0].tempsMin;
  const tempsMax = weeklyForecast.areas[0].tempsMax;
  
  //グラフとして扱えるように、文字列型->数字へ変換
  let timeStampArray = [];
  let tempsMinArray = [];
  let tempsMaxArray = [];
  
  for (var timeStamp of timeStamps) {
    var dt = new Date(timeStamp)
    timeStampArray.push(dt.toLocaleDateString());
    //ここでは、2024/2/12のような日付表記にしている。
  }
  
  for (var tempMin of tempsMin) {
    tempsMinArray.push(Number(tempMin));
    //数字へ変換し、新しい配列へ格納
  }
  
  for (var tempMax of tempsMax) {
    tempsMaxArray.push(Number(tempMax));
    //数字へ変換し、新しい配列へ格納
  }
  
  return [timeStampArray, tempsMinArray, tempsMaxArray]
}

function chartMaker (data) {
	//グラフを描きたい領域を設定
  let lineCtx = document.getElementById("lineChart");
  
  // 線グラフの設定
  let lineConfig = {
    type: 'line',
    data: {
      labels: data[0],  //=timeStampArray
      
      datasets: [{
        label: "最低気温",
        data: data[1],   //=tempsMinArray
        borderColor: '#f88',
      }, {
        label: "最高気温",
        data: data[2],  //=tempsMaxArray
        borderColor: '#484',
      }],
      
    },
    options: {
      scales: {
        // Y軸の最大値・最小値、目盛りの範囲などを設定する
        y: {
          suggestedMin: -5,   //ｙ軸の最小値
          suggestedMax: 40,  //ｙ軸の最大値
          ticks: {
            stepSize: 5,     //y軸の目盛り幅
          }
        }
      },
    },
  };
  
  //描きたい領域とグラフのデータなどをインスタンスへ渡す＝描画
  let lineChart = new Chart(lineCtx, lineConfig);
}


// API実行から他の関数も実行（返り値は次の変数へ格納される）
fetch(url)
  .then( response => response.json() )
  .then( weather => formatWeather(weather))
  .then( data =>...