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="scatterChart"></canvas>

JavaScript

// 気象庁のAPIから天気予報JSONファイルを読み取る
const KYOTO = 260000;
const TOKYO = 130000;
const OSAKA = 270000;
const KANAGAWA = 140000;
const HYOGO = 	280000;

const areaCodes= {"京都": KYOTO, "大阪":OSAKA, "兵庫":HYOGO, "東京":TOKYO, "神奈川": KANAGAWA};

//APIからデータを得る関数
async function getData(areaCodes) {
  let result = [];
  for (const areaCode of areaCodes) {
  	var url = `https://www.jma.go.jp/bosai/forecast/data/forecast/${areaCode}.json`
		var res = await fetch(url);
    var weather = await res.json();
    result.push(weather);
  }
  
  return result
}

//データの整形
function formatWeather(weathers){
	let tempsData = [];
  let tempRain = [];
  
	for (const weather of weathers) {
  	//データから週間予報を取得
    const weeklyWeather = weather[1].timeSeries[0].areas[0];
    const rainProps = weeklyWeather.pops;
    const temps = weather[1].timeSeries[1].areas[0];
    const tempsMins = temps.tempsMin;
    const tempsMaxs = temps.tempsMax;
    
    
    for (let i=0; i<rainProps.length; i++) {
    	tempsData.push({x:Number(tempsMins[i]), y:Number(tempsMaxs[i])});
    	tempRain.push({x:Number(tempsMins[i]), y:Number(rainProps[i])});
      //散布図のデータは{ x: 0, y: 0 }, ...のような配列である必要がある
    }
  }
  return [tempsData, tempRain]
}


//ここがグラフの設定
function chartMaker (data) {
  // 棒グラフの設定
  let scatterCtx = document.getElementById("scatterChart");
  let scatterConfig = {
    type: 'scatter',
    data: {
    	datasets:[ 
      	{
        label: "最低気温と最高気温の関係",
        showLine: false,  //線でつなぐかどうか
      	data: data[0],  //=tempsData
        pointBackgroundColor:'red'
        },
        {
        label: "最低気温と降水確率の関係",
        showLine: false,  //線でつなぐかどうか
      	data: data[1],  //=tempRain
        pointBackgroundColor:'blue'
        }
      ]
      
    },
    
    options: {
    responsive: true, //レスポンシブ対応
    plugins : {
    title: {
    text: "散布図",
    display: true,
    font: {size:16},
    legend: {
    display: true,
    position: 'top',
    align: 'center'
    }
    }
    
    } 
  }
  	
  };
  let...