JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<script src="https://rawgithub.com/SergioCrisostomo/Mootools-chart-flot/master/Source/moo.flot.js"></script>
<div id="placeholder" style="width:600px;height:300px;"></div>
<div id="clickInfo"></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 () {
    flot.plot(document.id('placeholder'), [{
        data: d,
        label: "Series 1"
    }, {
        data: d2,
        label: "Series 2"
    },{
        data: d3,
        label: "Series 3"
    }], {
        series: {
            lines: {
                show: true
            },
            points: {
                show: true
            }
        },
        grid: {
            hoverable: true,
            clickable: true
        },
        xaxis: {
            multipleSeriesEvent: null,
            swipeLine: null
        }
    });
    tooltip.inject(document.body);
    document.id('placeholder').addEvent('plothover', function (event, pos, items) {
        if (items) {
            var html = '';
            items.each(function (el) {
                var x = el.datapoint[0].toFixed(2),
                    y = el.datapoint[1].toFixed(2);
                html += el.series.label + " of " + x + " = " + y + "<br />";
            });

            $("tooltip").set('html', html).setStyles({
                top: items[0].pageY,
                left: items[0].pageX
            });
            $("tooltip").fade('in');
        } else {
            $("tooltip").fade('out');
        }
    });
    document.id('placeholder').addEvent('plotclick', function (event, pos, items) {
  //      console.log(event, pos, items);
    });
});
var tooltip = new Element('div', {
    id: "tooltip"
});
var d = [
    [0, 15],
    [2, 2],
    [4, 80],
    [6, 10],
    [8, 50],
    [9, 3]
];
var d2 = [
    [0, 0],
    [2, 20],
    [4, 8],
    [6, 10],
    [8, 5],
    [9, 13]
];
var d3 = [
    [0, 30],
    [2, 30],
    [4, 38],
    [6, 30],
    [8, 35],
    [9, 33]
];