JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<div id="placeholder" style="width:300px;height:200px"></div>

JavaScript

$(function() {

    var series = {data: [[0, 5.2], [1, 3], [2, 9.2], [3, 10]],
                  lines: {show: false},
                  bars: {show: true, barWidth: 0.75, align:'center'}}
   
    somePlot = $.plot("#placeholder", [ series ], {
        xaxis: {
            ticks: [[0,"One"],[1,"Two"],
                    [2,"Three"],[3,"Four"]]
        }
    });
    
    var ctx = somePlot.getCanvas().getContext("2d");
    var data = somePlot.getData()[0].data;
    var xaxis = somePlot.getXAxes()[0];
    var yaxis = somePlot.getYAxes()[0];
    var offset = somePlot.getPlotOffset();
    ctx.font = "16px 'Segoe UI'";
    ctx.fillStyle = "black";
    for (var i = 0; i < data.length; i++){
        var text = data[i][1] + '';
        var metrics = ctx.measureText(text);
        var xPos = (xaxis.p2c(data[i][0])+offset.left) - metrics.width/2;
        var yPos = yaxis.p2c(data[i][1]) + offset.top - 5;
        ctx.fillText(text, xPos, yPos);
    }
});