Chartjs-Chart.js and asynchronous loading

by

1👍

✅

You probably just need to set the chart width and height to 100%. I also removed the logging so that you can clearly see the results. i.e.

<div class="chart" style="position: relative; height:80vh; width:100vw"></div>

to

<div class="chart" style="height:100%; width:100%"></div>

With regards to the error code, you should probably use a catch on the chain.

e.g.

const label = [];
const cases = [];

fetch('https://rki.marlon-lueckert.de/api/states').then(response => {
    if (response.ok) return response.json();
    throw new Error(response.statusText) // throw an error if there's something wrong with the response
}).then(data => {
    for (var i = 0; i < data.states.length; i++) {
        label.push(data.states[i].name)
        cases.push(data.states[i].count)
    }
    chartIt();
}).catch(err => {
    console.error(err)
});

async function chartIt() {
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: label,
            datasets: [{
                label: 'Covid-19 cases',
                data: cases,
                backgroundColor: ['rgba(255, 99, 132, 0.2)'],
                borderColor: ['rgba(255, 99, 132, 1)'],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
}
<!DOCTYPE html>
<html>
<head>
    <title>Covid-19 Charts</title>
    <canvas id="myChart"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
    <script src="chartData.js"></script>
</head>
<body>
    <div class="chart" style="height:100%; width:100%">
    </div>
</body>
</html>

Leave a comment