JSFiddle - React, Tailwind, and code Playground

by Himanshu Joshi

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.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: 310px; height: 400px; margin: 0 auto"></div>
<div id="headers" class="row"style="min-width: 310px; height: 40px; margin: 0 auto">
    <div class="col-xs-4 text-left">Low Performance</div>
    <div class="col-xs-4 text-center">Normal</div>
    <div class="col-xs-4 text-right">High Performance</div>
</div>

JavaScript

window.onresize = function()
{
 //$('#container').highcharts().setSize($(window).width()/2, 300, false); 
    $("#headers").css
    console.log($('#container').highcharts());
}

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
       // title: {
         //   text: 'Column chart with negative values'
        //},
        xAxis: {
            //put drivers here instead.
           categories: ['Skills & Staffing', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
            labels:
            {
                enabled: true
            },
            
                lineColor: '#000',
                lineWidth: 1,
                gridLineWidth: 1
                //gridLineDashStyle: 'dash'
        },
        yAxis:{
              //gridLineWidth: 1
            gridLineDashStyle: 'dash',
            categories: ['Jan', '', '', '', '', 'Jun', '', '', '', '', 'Nov', 'Dec'],
              /*tickPositioner: function () {

        var maxDeviation = Math.ceil(Math.max(Math.abs(this.dataMax), Math.abs(this.dataMin)));
        var halfMaxDeviation = Math.ceil(maxDeviation / 2);

        return [-maxDeviation, -halfMaxDeviation, 0, halfMaxDeviation, maxDeviation];
    },*/
             labels:
            {
                enabled: true
                /*formatter: function () {
                    var label = "";
                    if(!isFinite(this.value))
                    {
                        label = '<span style="font-size: 18px;">' + this.value + '</span>'; 
                    }
                        return label;
                    }*/
            },
            //tickPositioner: function(min, max){
              //// return [Math.round(min), 0, Math.round(max)];   
            //},          
        },
        credits: {
            enabled: false
        },
        legend: {
            enabled:false  
        },
        series: [{
            //name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
...