JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div class="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    Highcharts.setOptions({
        colors: ['#C9F4F4']
    });
    $('.container').highcharts({        
        chart: {
            type: 'area',          
        },
        credits: {
            enabled: false
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'Jul','Aug','Sep','Oct','Nov','Dec'],
            tickmarkPlacement: 'on', 
            overflow:'false',
            gridLineWidth: 1,
            //tickLength: 0,
            title: {
                enabled: false
            },
            startOnTick: false,
            min: 0.5
        },
        yAxis: {             
            min: 100, 
            max: 1000,
            tickInterval: 100,                           
            gridLineWidth: 1,               
            title: {
                enabled: false
            },
            labels: {                                
                formatter: function () {
                    return this.value;
                }
            }
        },
        tooltip: {
            shared: true, 
            formatter: function () {
                return this.y;
            }
        },
        plotOptions: {
            series: {                
                lineColor: '#00CFCF',
                lineWidth: 1,
                marker: {
                    lineWidth: 1,
                    lineColor: '#00CFCF',
                    enabled: false,                    
                }
            }
        },
        navigation: {
            buttonOptions: {
                enabled: false
            }
        },
        series: [{
            name: 'Asia',
            data: [502, 635, 809, 947, 900, 1000, 1000,200,750,630,400,75]
        }]
    });
});