index.js

document.addEventListener('DOMContentLoaded', () => {
    console.log("loaded")
    fetchCountryData()
})

function fetchCountryData () {
    fetch('http://api.worldbank.org/v2/country/US/indicator/NY.GDP.MKTP.CD?format=json')
    .then(resp => resp.json())
    .then(data => {
        let years = data[1].map(year => year.date).reverse()
        let gdps = data[1].map(year => year.value).reverse()
        createChart(years,gdps)
    })  

}

function createChart(years,gdps){
    new Chart(document.getElementById("line-chart"), {
        type: 'line',
        data: {
          labels: years,
          datasets: [{ 
              data: gdps,
              label: "USA GDP",
              fill: false,
              backgroundColor: 'blue',
              borderColor: 'blue',
              pointBorderColor: 'blue',
              pointRadius: 1,
            }   
          ]
        },
        options: {
          title: {
            display: true,
            text: 'USA GDP Data 1969 - 2019',
          },
          animation: false,
          legend: {display: true},
          maintainAspectRatio: false,
          responsive: true,
          responsiveAnimationDuration: 0,
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true,
                callback: function(value, index, values) {
                  if(parseInt(value) >= 1000){
                    return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                  } else {
                    return '$' + value;
                  }
                }
              }
            }]
          }
        }
      });

}

How is this changed to chart two or three countries?