JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<div id="placeholder"></div>

CSS

#placeholder {
    height: 300px;
}

JavaScript

$(function () {

    var data = [{
        label: "Foo",
        data: [
            [2],
            [3, 9, 12],
            [6, 0, 3],
            [9, 11, 12],
            [12, 0, 1],
            [15, 0, 2],
            [18],
            [3, 12, 12],
            [9, 12, 12]
        ]
    }, {
        label: "Bar",
        data: [
            [2],
            [3, 0, 5],
            [6, 3, 7],
            [9, 4, 11],
            [12, 1, 3],
            [15, 2, 5],
            [18]
        ]
    }, {
        label: "Tree",
        data: [
            [2],
            [3, 5, 9],
            [6, 7, 15],
            [9, 0, 4],
            [12, 3, 13],
            [15, 5, 17],
            [15, 17, 17],
            [12, 13, 13],
            [6, 15, 15],
            [18]
        ]
    }, ];

    var options = {
        series: {
            bars: {
                show: true,
                barWidth: 1
            }
        },
        xaxis: {
            align: "center",
            ticks: [
                [3.5, 'text1'],
                [6.5, 'text2'],
                [9.5, 'text3'],
                [12.5, 'text4'],
                [15.5, 'text5']
            ]
        }
    };

    var plot = $.plot("#placeholder", data, options);

    $.each(plot.getData()[0].data, function (i, el) {
        if (el.length > 1) {
            var o = plot.pointOffset({
                x: el[0],
                y: el[1]
            });
            $('<div class="data-point-label">' + el[1] + '</div>').css({
                position: 'absolute',
                left: o.left + 4,
                top: o.top,
                'text-align': 'center',
                display: 'none'
            }).appendTo(plot.getPlaceholder()).fadeIn('slow');
        }
    });

});