JSFiddle - React, Tailwind, and code Playground

by seza

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/themes/gray.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

$(function () {
    
    var COLOR_USERS = '#8AFF00',
        COLOR_USERS_HOVER = '#AAFF66',
		COLOR_DENIED = '#FF6A6A',
    	COLOR_DENIED_HOVER = '#FF8A8A',
    
    usageSeries = {
        color: COLOR_USERS,
        states:{
			hover:{
				color: COLOR_USERS_HOVER
			}
		}
    },
    
    deniedSeries = {
        color: COLOR_DENIED,
        states:{
			hover:{
				color: COLOR_DENIED_HOVER
			}
		}
    },
    
    limitSeries = {
        color:'#FF0000'
    };
    
    
    $('#container').highcharts({
        chart: { },
        title: {text:'SEIS3D'},
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        plotOptions: {
            column: {
                stacking: 'normal',
        		pointPadding: 0,
        		groupPadding: 0,
        		borderWidth: 0,
        		shadow: false
            }, line: {
                dashStyle: 'solid',
				lineWidth:1,
				marker: {radius:0},
        		shadow:false,
        		states:{
					hover:{
						enabled:false
					}
				}
            }
        },
        series: [
            $.extend({
                name: 'Negadas', 
                type: 'column',
                data: [0, 26, 0, 0, 66, 44, 0, 0, 0, 0, 0, 0]}, deniedSeries),
            $.extend({
                name: 'Em uso',
                type: 'column',
                data: [144, 150, 135, 148, 150, 150, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]}, usageSeries),
            $.extend({
                name: 'Limite', 
                data: [[0, 150], [11, 150]]}, limitSeries)
        ]
    });
});