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="barChart"></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
}

// JSONデータ取得後に呼び出す関数
function formatWeather(weathers, keys){
	let rainProps = [];
  let locations = [];
  let count = 0;
  
	for (const weather of weathers) {
  	//データから降水確率のデータを取得
    const rainData = weather[0].timeSeries[1].areas[0];
    const rainProp = Number(rainData.pops[0]);
    const location = `${keys[count]}(${rainData.area.name})`;
    
    rainProps.push(rainProp);
    locations.push(location);
    count++
  }
  
  return [locations, rainProps]
}


//ここがグラフの設定
function chartMaker (data) {
  // 棒グラフの設定
  let barCtx = document.getElementById("barChart");
  let barConfig = {
    type: 'bar',
    data: {
      labels: data[0],  //=locations
      datasets: [{
        data: data[1],   //=rainProps
        label: '降水確率',
        backgroundColor: [  // それぞれの棒の色を設定(dataの数だけ)
          '#1e90ff',
          '#6495ed',
          '#00bfff',
          '#87ceeb',
          '#add8e6',
          '#b0e0e6',
        ],
        borderWidth: 1,
      }]
    },
  };
  let barChart = new Chart(barCtx, barConfig);
 }
 
 
 async function fn(areaCodes) {
 	let keys = [];   //keysには、設定した地域名が入ります。
  let codes = [];
  
 	for (var key in areaCodes) {
  	keys.push(key);
    codes.push(areaCodes[key]);
  }
 	const weathers = await getData(codes);
  const data = formatWeather(weathers, keys);
  chartMaker (data);
 }
 
 fn(areaCodes);