JSFiddle - React, Tailwind, and code Playground

by danzkusuma

HTML

<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<script src="http://fendykusuma.com/js/jquery.flot.spline.js"></script>
<div id="wtvsone" style="width: 540px; height: 590px;"></div>

CSS

.flotTooltip{
    position: absolute;
    border: 1px solid rgb(255, 221, 221);
    padding: 2px 5px;
    color: white;
    background-color: rgb(51, 51, 51);
    display: none;
    opacity: 0.8;
    top: 303px;
    left: 565px;
    font-size: 14px;
}

JavaScript

var theret;
    var hData = [{"data":[[48.97,4566.43],[50.74,4601.89],[56.01,4695.46],[61.54,4791.64],[66.51,4883.59]],"label":"importagain"},{"data":[[48.97,4566.43],[50.74,4601.89],[56.01,4695.46],[61.54,4791.64],[66.51,4883.59],[71.39,4977.44],[76.44,5071.95],[81.32,5165.24],[85.93,5259.43],[90.35,5353.06],[94.92,5447.59],[99.65,5543.11],[104.11,5640.11],[108.29,5734.09],[112.38,5827.46],[116.23,5922.01],[120,6014.53],[124.01,6108.91],[128.01,6204.84],[131.64,6299.93],[135.23,6394.05],[138.86,6488.83]],"label":"importlagi"}] ;

    $(function() {
        //aa

        var oneGraph1 = [[0,0], [1,30.776], [4,60.876], [2,60.875]];
        var oneGraph2 = [[0,10], [-1,30], [-4,60], [-2,60]];
        var twoGraph1 = [[20,20], [0,0],   [10,-30],  [40,-60],  [20,-60]];
        var twoGraph2 = [[0,0],   [0,-10], [-10,-30], [-40,-60], [-20,-60]];

        theret = [{data: oneGraph1, label: "Yellow"}, {data: oneGraph2, label: "Blue"}, {data: twoGraph1, label: "Red"}];

        $("<div id='tooltipOne' class='flotTooltip'></div>").appendTo("body");
        $("<div id='tooltipTwo' class='flotTooltip'></div>").appendTo("body");

        var marking = [{ color: "#333", lineWidth: 1, xaxis: { from: 0, to: 0 } }];

        var oneOptions = { series: {
                lines:{
                    lineWidth: 7
                },
                points: {
                    show: true
                },
                splines: {
                    show: true,
                    tension: 0.8,
                }
            },
            grid: {
                hoverable: true,
                markings: marking
            },
            xaxis: { min: -10, max: 150},
            yaxis: {
                min: 0,
                max: 6500,
                transform: function (v) { return -v; },
                inverseTransform: function (v) { return -v; }
            }
        };

        var twoOptions = { series: {
                lines:{
                    lineWidth: 7
       ...