See the App Code
//Returns an array of information to be templated
function calculateLoan(amount, term, rate) {
    //TWO: Calculate the Collected User Data
    //Total Monthly Payment = (amount loaned) * (rate/1200) / (1 – (1 + rate/1200)^(-Number of Months) )
    let totalMonPay = (amount) * (rate / 1200) / (1 - Math.pow((1 + rate / 1200), -term));
    let remainingBal = amount; 
    //Remaining Balance = Balance After Each Monthly Payment 
    let interestPay = remainingBal * (rate / 1200); 
    //Interest Payment = Previous Remaining Balance * rate/1200
    let principalPay = totalMonPay - interestPay; 
    //Principal Payment = Total Monthly Payment - Interest Payment
    let totalInterest = 0; //Remaining Balance = Previous Remaining Balance - principal payments
    let totalPrincipal = 0; //Total amount paid on principal

    let loanData = [];
    //For loop based on rate for(let i = 1; i <= term; i++)
    for (let i = 1; i <= term; i++) { //To show the month use the index of the loop
        let obj = {};
        obj["totalMonPay"] = principalPay + interestPay;
        obj["totalInterest"] = totalInterest += interestPay; 
        //total interest will gradually increase as monthly payments are made
        obj["principalPay"] = principalPay = totalMonPay - interestPay; 
        //Principal will increase since interest amount owed goes down
        obj["remainingBal"] = remainingBal -= principalPay; 
        //Remaining balance will slowly decrease as payments are made
        obj["interestPay"] = interestPay = remainingBal * (rate / 1200); 
        //As loop continues, it gradually decreases as more payments are made
        obj["totalPrincipal"] = totalPrincipal += principalPay;
        obj["month"] = month = i;
        //obj["totalMonPay"] = totalMonPay;

        loanData.push(obj);
    }

    return loanData;

    //In each loop you need to store: What month, total interest paid, 
    //total principal paid, interest for this
    //month, principal for this month, remaining principle (amount - total principal) 
}

//Your Payments Section=Display Area for User Input Form
function loadCalculationResult() {
    let loanData = [];
    loanData = startLoan;
    displayData(loanData, amount, term, rate);

};

function startLoan() {
    //ONE: User Input Form Section
    const amount = Number(document.getElementById("loanAmount").value); //Input = Total Loan Amount 
    const term = Number(document.getElementById("loanTerm").value); //Input = Term of the Loan in Months
    const rate = Number(document.getElementById("loanRate").value); //Input = Interest Rate

    let calculationResult = calculateLoan(amount, term, rate);

    displayData(calculationResult, amount, term, rate);
}

//Amoritized Loan Payment Schedule Table
function displayData(loanData, amount) {
    //Use amount, term, and rate to redisplay the information the user entered on the table
    const template = document.getElementById("Schedule-Template");
    const resultsBody = document.getElementById("resultsBody");
    //Clear Table First
    resultsBody.innerHTML = "";
    for (let i = 0; i < loanData.length; i++) {
        const dataRow = document.importNode(template.content, true);


        dataRow.getElementById("month").textContent = loanData[i].month;
        dataRow.getElementById("payment").textContent = loanData[i].totalMonPay.toFixed(2);
        dataRow.getElementById("principalPay").textContent = loanData[i].principalPay.toFixed(2);
        dataRow.getElementById("totalPrincipal").textContent = loanData[i].totalPrincipal.toFixed(2);
        dataRow.getElementById("interestPay").textContent = Math.abs(loanData[i].interestPay.toFixed(2));
        dataRow.getElementById("totalInterest").textContent = loanData[i].totalInterest.toFixed(2);
        dataRow.getElementById("newBalance").textContent = Math.abs(loanData[i].remainingBal.toFixed(2));

        //Use .toFixed(2) to display the output as standard US currency
        //Only use it for display you need to retain the full value for calculations

        resultsBody.appendChild(dataRow);

    }
    //Display Total Principal and Total Interest in a Chart
    createChart(loanData);


    //Create the Summary Area
    document.getElementById("monthlyPayment").innerText = moneyPrint(loanData[0].totalMonPay.toFixed(2));
    document.getElementById("totalPrincipal").innerText = moneyPrint(amount);
    document.getElementById("totalInterest").innerText = moneyPrint(
        loanData[loanData.length - 1].totalInterest.toFixed(2));
    document.getElementById("totalCost").innerText = moneyPrint(
        (amount + loanData[loanData.length - 1].totalInterest).toFixed(2));

}

//Display Numbers as US Currency
function moneyPrint(amount) {
    return Number(amount).toLocaleString("en-US", {
        style: "currency",
        currency: "USD",
    });

}
                                                
                                            
See the Chart Code
function createChart(dataset) {
    var ctx = document.getElementById('myChart');
    let position = dataset.length - 1;
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['Principal', 'Interest'],
            datasets: [{
                label: '% of total',
                data: [dataset[position].totalPrincipal.toFixed(2), 
                dataset[position].totalInterest.toFixed(2)],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                ],
                borderWidth: 1
            }]
        },
    });

}