JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<body>
    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
<div id="data">AREA,VALUE,TYPE,SHIFT1,SHIFT2
    Blog1,50000,Blog1_Shift,5,6
    Blog2,60000,Blog2_Shift,2,3
    Blog3,40000,Blog3_Shift,7,8
</div>

JavaScript

$(document).ready(function () {
    var options = {
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        title: {
            text: 'My Title Here'
        },
        xAxis: {
            categories: [],
            name: []
        },
        yAxis: {
            title: {
                text: 'Value Here'
            }
        },
        legend: {
        },
        tooltip: {
            shared: true,
            crosshairs: true
        },
                    plotOptions: {
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true
                            },
                            colorByPoint: true
                        }
                    },

        series: [],
        drilldown: {}

    };

    var csvData = document.getElementById("data").innerHTML;

    console.log(csvData);
    var lines = csvData.split('\n');

    var series = [];
    var drilldown = {
        series: []
    };
    // I know with the below I get an extra line so can deal with that when I get the rest of the data sorted

    $.each(lines, function (lineNo, line) {

        if (lineNo > 0 && lineNo < 4) {

            var items = line.split(',');
            var seriesname = String(items[0]); // this is the area name
            var area_cost = parseFloat(items[1]); // this is the data for the area rollup
            var drill_id = String(items[2]); // this will be the id of the drilldown
            var shift_one_value = parseFloat(items[3]); // drilldown shift1 value
            var shift_two_value = parseFloat(items[4]); // drilldown shift2 value
            
            if(!isNaN(area_cost) && !isNaN(shift_one_value) && !isNaN(shift_two_value))  {
                                series.push({
                                    name: seriesname,
                                    data: [{
                               ...