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;
        var yPos = yaxis.p2c(data[i][1]) + offset.top + metrics.width + 5;
        ctx.save();
        ctx.translate(xPos, yPos);
        ctx.rotate(-Math.PI/2);
        ctx.fillText(text, 1, 1);
        ctx.restore();
    }
    
    
});