Gridstack on highcharts, reflow not working

Question

I am trying to get highcharts into Gridstack and allow it to be able to draggable and resizable. I managed to render it with javascript but having error to render with Jquery.

var options = { // put in gridstack options here
disableOneColumnMode: true, // for jfiddle small window size
float: false,
placeholderClass: "placeholder"

};
var grid = GridStack.init(options);
        
var chart = Highcharts.chart('testChart', {
    chart: {
        animation: false,
        type: 'bar'
    },
    plotOptions: {
        series: {
            animation: false,
        }
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }]
});

document.querySelector('.grid-stack').addEventListener('change', function(event, items) {
    var chartContainer = chart.renderTo;
    document.querySelector(chartContainer).css(
        'height',
        document.querySelector(chartContainer.parentElement).height() - document.querySelector('#testChartHeader').height()
    );

    chart.reflow();
});

I saw some some JSFiddle but I couldnt get either jquery or the reflow to work I am trying to write all in Javascript as it works to render my charts and grids, but the chart is not rendering correctly.