JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://www.highcharts.com/js/highcharts.js"></script>
<div id="container" style="width: 400px; height: 150px;"></div>

JavaScript

chart1 = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'line',
        animation: true,
        backgroundColor: null,
        plotBackgroundColor: "#ebecee",
        margin: 20
    },
    credits: {
        enabled: false
    },
    title: {
        text: ""
    },
    series: [{
        name: 'Average',
        data: [{y:1, marker: {enabled: true}}, 
               {y:0, marker: {enabled: false}},
               {y:4, marker: {enabled: false}},
               {y:5, marker: {enabled: false}},
               {y:2, marker: {enabled: false}},
               {y:6, marker: {enabled: false}},
               {y:1, marker: {enabled: false}},
               {y:6, marker: {enabled: false}},
               {y:8, marker: {enabled: false}},
               {y:4, marker: {enabled: false}},
               {y:1, marker: {enabled: false}},
               {y:3, marker: {enabled: true}}]
    }],
    legend: {
        enabled: false
    },
    xAxis: {
        categories: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
        gridLineColor: '#d0d1d3',
        gridLineWidth: 1,
        plotBands: [{
            from: 4.5,
            to: 5.5,
            color: 'blue'
        }, {
            from: 5.5,
            to: 6.5,
            color: 'gray'
        }]
    },
    yAxis: {
        gridLineColor: '#197F07',
        gridLineWidth: 0,
        labels: {
            enabled: false
        },
        title: ""
    }
});