JSFiddle - React, Tailwind, and code Playground

by Korah Babu Varghese

HTML

<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

$(function () {
    var data = [
 {"unit":"a", "status":"Stopped / Idle", "val":21.2022222222222222},
    {"unit":"a", "status":"Working", "val":53.3066666666666667},
     {"unit":"a", "status":"Weorking", "val":53.3066666666666667},
    {"unit":"a", "status":"Headland Turning", "val":20.04694444444444444444},
    {"unit":"a", "status":"nsport", "val":5.1425000000000000},
    {"unit":"b", "status":"Stopped / Idle", "val":334.7358333333333333},
    {"unit":"b", "status":"Workinkkg", "val":212.6386111111111111},
    {"unit":"b", "status":"Headland Turning", "val":26.2955555555555556},
    {"unit":"b", "status":"Transport", "val":0.00444444444444444444},
    {"unit":"c", "status":"Headlaurning", "val":27.2955555555555556},
    {"unit":"c", "status":"Dand Turning", "val":26.2955555555555556}
    
];
var seriesData = [];
var xCategories = [];
var i, cat;
for(i = 0; i < data.length; i++){
     cat = data[i].unit;
     if(xCategories.indexOf(cat) === -1){
        xCategories[xCategories.length] = cat;
     }
}
for(i = 0; i < data.length; i++){
    if(seriesData){
      var currSeries = seriesData.filter(function(seriesObject){ return seriesObject.name == data[i].status;});
      if(currSeries.length === 0){
          seriesData[seriesData.length] = currSeries = {name: data[i].status, data: []};
      } else {
          currSeries = currSeries[0];
      }
      var index = currSeries.data.length;
      currSeries.data[index] = data[i].val;
    } else {
       seriesData[0] = {name: data[i].status, data: [data[i].val]}
    }
}

    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                categories: xCategories
            },
            yAxis: {
                min: 0,
                title: {
                    text:...