JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/SergioCrisostomo/Mootools-chart-flot/master/Source/moo.flot.js"></script>
<div id="placeholder" style="width:600px;height:300px;"></div>

CSS

#tooltip {
    position:absolute;
    border:1px solid #fdd;
    padding:2px;
    background-color:#fee;
    opacity: 0;
    margin-left: 20px;
}
#placeholder {
    position: relative;
}

JavaScript

window.addEvent('domready', function () {
    var options = {
        series: {
            lines: {
                show: true,
            },
            points: {
                show: false
            }
        },
        yaxis: {tickLength:0}, 
        xaxis: {
            tickSize: 1,
            max: 8,
            tickLength:0
        }
    };
    xMin = 0;

    var Flot = flot.plot(document.id('placeholder'), data1, options);

    function generateData() {
        var yVal1 = Math.floor(Math.random() * 11 + 5);
        var yVal2 = Math.floor(Math.random() * 11);
        var newValue = [xMin + 10, yVal1];
        var newValue2 = [xMin + 10, yVal2];
        data1[0].data.push(newValue);
        data1[1].data.push(newValue2);

    }

    setInterval(function () {
        xMin = xMin + 0.01;
        if (xMin.toFixed(2) % 1 === 0) generateData();
        Flot.getOptions().xaxes[0].min = xMin;
        Flot.getOptions().xaxes[0].max = xMin + 8;
        Flot.setData(data1);
        Flot.setupGrid();
        Flot.draw();
    }, 50);

});
var data1 = [{
    label: 'Series 1',
    data: [
        [0, 15],
        [1, 16],
        [2, 11],
        [3, 12],
        [4, 13],
        [5, 14],
        [6, 13],
        [7, 16],
        [8, 11],
        [9, 12]
    ]
}, {
    label: 'Series 2',
    color: 'green',
    data: [
        [0, 3],
        [1, 6],
        [2, 1],
        [3, 2],
        [4, 3],
        [5, 4],
        [6, 3],
        [7, 2],
        [8, 1],
        [9, 2]
    ]
}];