JSFiddle - React, Tailwind, and code Playground

by warnisw

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px; width: 900px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

JavaScript

const color = {
	99.9: 'red',
}

$.getJSON(
    'https://api.myjson.com/bins/1epjvc',
    function(data) {

        data.forEach(function(el, i) {
        
            data[i] = {
                x: el[0],
                y: el[1],
                marker: {
                    fillColor: el[1] < 99.9 ? "red" : "blue", radius: 4,                    
                }
                
            }
           
        });


        Highcharts.chart('container', {
            chart: {
                type: 'area',

                backgroundColor: '#000000'
            },


            title: {
                text: 'Network manager',
                align: 'left',
                style: {
                    color: 'white',
                }
            },
            subtitle: {
                text: 'Overall availability',
                align: 'left',
                y: 30
            },

            xAxis: {
                tickPixelInterval: 50,
                type: 'datetime',
                lineColor: '#ffffff',
                lineWidth: 0.5,
                title: {
                    align: 'low',
                    x: 10,
                    text: 'February',
                    style: {
                        color: 'white',
                    }
                },

                labels: {
                    formatter: function() {

                        return moment(new Date(this.value)).format('DD'); // example for moment.js date library
                    },
                    style: {
                        color: 'white',
                    },
                },

            },
            yAxis: {
                gridLineColor: 'transparent',
                //lineColor: '#ffffff',
                offset: 2,
                min: 99,
                max: 100.00,
                //floor: '99.0',
                //max: '100.01',
                tickInterval: 0.1,

                title: {
                    align: 'high',
           ...