Issues rendering share prices from Alpha Vantage on Chart JS Line chart

[marcello-calabrese]

Hi, Hope someone can help. I am not sure what I am doing wrong with Chart JS, I am trying to fetch the close prices of a share MSFT for example, but the line chart doesn't render the prices and dates. Thanks a lot!!

Here below how it looks and then I paste the code:

Here is the code:

`

<title>Charts JS Tutorial</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7"></script>

<div>
    <canvas id="myChart"></canvas>
</div>

   <script>
    const ApiKey = "KD5PN0GHOEGDOP3C"
    const symbol = "MSFT"
    const apiURL = "https://www.alphavantage.co/query?function=TIME_SERIES_MONTHLY&symbol=${symbol}&apikey=${ApiKey}"
    fetch(apiURL)
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok' + response.statusText);
        }
        return response.json();
    })
    .then(data => {
        const timeSeries = data['Monthly Time Series'];
        const dates = [];
        const closePrices = [];

        for (const date in timeSeries) {
            dates.push(date);
            closePrices.push(parseFloat(timeSeries[date]["4. close"]));
            console.log(dates);
            console.log(closePrices);
        }
        dates.reverse();
        closePrices.reverse();

        // Render the data into Chart Js

        const ctx = document.getElementById('myChart').getContext('2d');
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: dates, // X-axis: Dates
                    datasets: [{
                        label: `Close Prices for ${symbol}`,
                        data: closePrices, // Y-axis: Close Prices
                        borderColor: 'rgba(75, 192, 192, 1)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderWidth: 5
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: 'Date'
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: 'Close Price'
                            }
                        }
                    }
                }
            });
        })
        .catch(error => {
            console.error('There was a problem with the fetch operation:', error);
        });

   </script> 

`