Unable to show Highcharts graph - ASP.Net MVC

Question

Hi,

 

Trying to bind data to Highchart & display but couldn't show on webpage.

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: '@Url.Action("getChartData", "Default")',
            dataType: 'json',
            type: 'GET',
            success: function (resData) {
                debugger;
                let dataArray = new Array();
                for (let i in resData) {
                    let series = new Array(resData[i].ProductName, resData[i].ProductSales);
                    dataArray.push(series);
                }
                drawChart(dataArray);
            },
            error: function () {
                alert('server could not process request');
            }
        });
    });

    function drawChart(resData) {
        debugger;
        $('#highchartData').highcharts({
            chart: {
                type: "column"
            },
            title: {
                text: 'Product Sales for year 1997'
            },
            series: {
                data: resData
            },
            plotOptions: {
                column: {
                    dataLabels: { enabled: true }
                }
            },
            xAxis: {
                scrollbar: {
                    enabled: true
                },

            },
            credits: {
                enabled: false
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            }
        });
    }
</script>

data returned from c# code as shown below.

 

 

 

graph doesn't show up

 

 

Couldn't figure out my mistake, your response is appreciated. Thanks