JSFiddle - React, Tailwind, and code Playground

by Margo

HTML

<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<div id ="ResizableContainer" class="ui-widget-content" style="width:300px;height:150px;">
    <div id="placeholder" class="graph-placeholder"></div> 
</div>

CSS

.graph-placeholder {
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 1.2em;
    padding: 0; 
    position: relative;
}

JavaScript

var plot;
$(function() {
     //Add tooltip
    $("#placeholder").bind("plothover", function (event, pos, item) {
 if (item) {  
                $("#tooltip").remove();
           
                    var x = item.datapoint[0],
                        y = item.datapoint[1];
                    showTooltip(item.pageX, item.pageY, x + " / " + y + " for " + item.series.label);
                    }
    }); 
    var d3 = [[0, 1], [1, 2], [2, 3],[3, 4]];
    var d2 = [[-1, 0],[0, 1], [1, 2], [2, 3]];
    
    var data = [
    {
        label: 'data2',
        color:1,
        data: d2
    },
    {   
        label: 'data3',    
        color:2,
        data: d3
    }];
            
    var conf = {
        lines: { show: true },
        points: { show: true },
        grid: { hoverable: true, clickable: true },
    };
    
    plot = $.plot($('#placeholder'), data, conf);
    
    }); 
    
function showTooltip(x, y, contents) {
    $('<div id="tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: y + 5,
        left: x + 5,
        border: '1px solid #fdd',
        padding: '2px',
        'background-color': '#fee',
        opacity: 0.80
    }).appendTo("body").fadeIn(200).fadeOut(6000);
}