JSFiddle - React, Tailwind, and code Playground

by NishitDhakar

HTML

<script src="http://cachedcommons.org/cache/jqplot/0.9.7/javascripts/jqplot-min.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.categoryAxisRenderer.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.barRenderer.js"></script>
<script src="//cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.pointLabels.js"></script>
    <div id="chart3"></div>

CSS

.jqplot-point-label {
    color : white;
    margin-top : 150px;
}

JavaScript

$(document).ready(function(){
    var line1 = [['Kliks', 119],['Unieke kliks', 91],['Afgemeld', 12]];

    $('#chart3').jqplot([line1], {
        seriesColors:['#74b6e7', '#003246', '#e22a20'],
        pointLabels:{show:true, stackedValue: true},
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {
                varyBarColor: true
            }
        },
        series:[
             {pointLabels:{
               show: true,
               location:'s',
               ypadding : 5,
               edgeTolerance : -100,
             }}],
        axes:{
            xaxis:{
                renderer: $.jqplot.CategoryAxisRenderer
            }
            
        }
    });
});

$(".jqplot-point-label").first().css("margin-top","0px");
$(".jqplot-point-label").last().css("margin-top","200px");