JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<!-- basic time series flot chart -->
<div style="height: 400px; width: 600px;" id="placeholder"></div>

JavaScript

var d = [
    [1409558400000, 7.45],
    [1409562000000, 5.71],
    [1409565600000, 7.50],
    [1409569200000, 7.63],
    [1409576400000, 3.14],

    [1409644800000, 7.45],
    [1409648400000, 5.71],
    [1409652000000, 7.50],
    [1409655600000, 7.63],
    [1409662800000, 3.14],

    [1409731200000, 7.45],
    [1409734800000, 5.71],
    [1409738400000, 7.50],
    [1409742000000, 7.63],
    [1409749200000, 3.14]
];

    $.each(d, function (index, datapoint) {
        datapoint[0] = (new Date(datapoint[0])).getHours();
    });

$.plot("#placeholder", [d], {
    series: {
        lines: {
            show: true
        },
        points: {
            show: true
        }
    },
    grid: {
        hoverable: true,
        clickable: true,
        markings: [{
            yaxis: {
                from: 0,
                to: 4
            },
            color: "#F2CDEA"
        }, {
            yaxis: {
                from: 4,
                to: 7
            },
            color: "#D7EEE1"
        }, {
            yaxis: {
                from: 7,
                to: 12
            },
            color: "#F2CDEA"
        }]
    },
    xaxis: {

    },
    yaxis: {
        min: 0,
        max: 12
    }
});