JSFiddle - React, Tailwind, and code Playground

by Ratan Paul

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(document).ready(function() {
    var json = [{
    "key": "Apples",
    "value": "4"
}, {
    "key": "Pears",
    "value": "7"
}, {
    "key": "Bananas",
    "value": "9"
}];
    var processed_json = new Array();
$.map(json, function(obj, i) {
    processed_json.push([obj.key, parseInt(obj.value)]);
});
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            type: "category"
        },
        series: [{
            data: processed_json
        }]
    });
});