JSFiddle - React, Tailwind, and code Playground

by gopinaghr

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<table border='1' width='100%'>
    <tr>
        <td width='100%'>
            <div id="container" width='100%'></div>
        </td>
    </tr>
</table>

JavaScript

// Example of bar chart

var chart1; // globally available
$(document).ready(function () {
    var width = $(document).width();
    var height = $(document).height();
    $("#container").css("width", width - 40);
    $("#container").css("height", height - 60);
    chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
    $(window).bind("resize", resizeChart);
});

function resizeChart() {
    var width = $(document).width() - 55;
    var height = $(document).height() - 60;
    $("#container").css("width", width);
    $("#container").css("height", height);
}