Highcharts not rendering to JQuery generated div element

I'm generating a chart via Highcharts on a jquery created div. However, the chart doesn't seem to be created. Below is the code I use

var topRow = jQuery('<tr></tr>', {class: "with-sub"});
                var td = jQuery('<td></td>', {colspan: $scope.statuses.length + 3});
                var subwrap = jQuery('<div></div>', {class: "sub-wrap"});

var chartsParent = jQuery('<div></div>', {class: "L chart"});

subwrap.append(chartsParent);

td.append(subwrap);
                topRow.append(td);
                topRow.insertAfter( jQuery("tbody tr") );

new Highcharts.Chart({
                    chart: {
                        type: 'pie',
                        renderTo: chartsParent[0]
                    },

                    plotOptions: {
                        pie: {
                            dataLabels: {
                                enabled: false
                            }
                        }
                    },

                    series: [{
                        data: [
                            ['Firefox',   44.2],
                            ['IE7',       26.6],
                            ['IE6',       20],
                            ['Chrome',    3.1],
                            ['Other',    5.4]
                        ]
                    }]
                });

I've also tried rendering to an existing DOM element, however, when I appended it to the div element, the data was lost.

I've searched quite a lot but I can't seem to make it work. Any ideas as to what I could be doing wrong? Thanks in advance.