JSFiddle - React, Tailwind, and code Playground

by itsjustcarlos

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div class="container" style ="position:relative; ">
<div class = "row" style = "position: relative; " >
<div class='col-md-8' id="container" style="min-width: 310px; max-width: 1200px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    // Age categories
    var categories = ['07/15/2016','07/16/2016','07/17/2016','07/18/2016','07/19/2016','07/20/2016','07/21/2016','07/22/2016'];
    $(document).ready(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: '  Report'
            },
            subtitle: {
                text: ''
            },
            xAxis: [{
                categories: categories,
                reversed: false,
                labels: {
                    step: 1
                }
            }, { // mirror axis on right side
                opposite: true,
                reversed: false,
                categories: categories,
                linkedTo: 0,
                labels: {
                    step: 1
                }
            }],
            yAxis: [{
                min: -18272,
                max: 19000,
                title: {
                    text: 'Tickets'
                },
                labels: {
                            
                }
            },{ min: -40, max: 60,
        title: {
                    text: 'FRT'
                },
                opposite: true
              
            }


],

            plotOptions: {
                series: {
                    stacking: 'normal'
                }
            },

            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + ' ' + this.point.category + '</b><br/>' +
                        'Tickets: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
                }
            },

            series: [{
                 name: 'New',
                 data: [9905,10842,15275,9485,11296,6727,6700,3971],
                 color: '#ffff99'
                    },{
                 name: 'Open',
                 data: [7775,5509,5100,5166,8741,9163,8651,5928],
                 color: '#ff6666'
 ...