JSFiddle - React, Tailwind, and code Playground

by anikettiwari

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

JavaScript

$(function(){
    var chart1;
    $(document).ready(function(){
    var options = {
        colors: ["#3ACB35", "#DE3A15", "#FF9A00", "#00B8F1"],
        chart: {
            renderTo: 'container',
            type: 'bar',
            backgroundColor: 'black',
            borderColor: 'black',
            borderWidth: 0,
            className: 'dark-container',
            plotBackgroundColor: 'black',
            plotBorderColor: '#000000',
            plotBorderWidth: 0
        },
        credits: {
            enabled: false
        },
        title: {
            text: 'Count Per Category',
            style: {
                color: 'white',
                font: 'normal 22px "Segoe UI"'
            },
            align: 'left'
        },
        tooltip: {
            backgroundColor: 'rgba(0, 0, 0, 0.75)',
            style: {
                color: '#F0F0F0'
            }
        },
        categories: {
            enabled: 'true'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0,
            itemStyle: {
                font: '9pt Segoe UI',
                color: 'white'
            },
            itemHoverStyle: {
                color: 'grey'
            }
        },
        xAxis: {
            categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5'],
            tickInterval: 1,
            labels: {
                enabled: true,
                formatter: function() {
    								var a = this.value;
                    return '<span title="' + a + '"></span>';
                },
                useHTML: true,
                style: {
                textShadow: false,
                verticalAlign: 'middle',
                textOverflow: 'ellipsis'
              }  
        },
            title: {
                enabled: false
            },
            gridLineColor: '#222222'
        },
        yAxis: {
            title:
            {
          ...