Cannot synchronize functions to parse data and then visualise it

I have written this code to parse a csv file and then use this data to render a bar chart. I have tried to account for asynchronous functions using async/await, but for some reason my code is not working. When I run it the chart loads but the bars only render when I resize the window. Please could someone point out what I am doing wrong?

function parseData (dataFile){
    var barLabels = []
    var barData = []
    d3.csv(dataFile).then(function(datapoints) {
        for (i=0; i < datapoints.length; i++){
            barLabels.push(Object.values(datapoints[i])[0]);
            barData.push(Object.values(datapoints[i])[1]);
        }        
    });
    return [barLabels, barData];
}

function makeChart(dataX, dataY, canvasID){ 
    var ctx = document.getElementById(canvasID)
    var chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: dataX,
            datasets: [
            {
                label: "Carbon Footprint of Leading European Apparel Brands in 2019",
                data: dataY,
                              
            }]
        }, 

    });

    
}


async function renderChart(file){
    let chartData = await parseData(file);
    makeChart(chartData[0], chartData[1], 'chart')
}

renderChart('carbon-footprint-of-apparel-brands-2019.csv')