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, 1.2], [1, 3], [2, 9.2], [3, 10]]},
                  {data: [[0, 6], [1, 7], [2, 13], [3, 17]]}]                  
   
    somePlot = $.plot("#placeholder", series, {xaxis:{min:-0.2, max:3.2}});
    
    var ctx = somePlot.getCanvas().getContext("2d");
    mySeries = somePlot.getData();
    var xaxis = somePlot.getXAxes()[0];
    var yaxis = somePlot.getYAxes()[0];
    var offset = somePlot.getPlotOffset();
    ctx.font = "13px 'Segoe UI'";
    ctx.fillStyle = "black";
    for (var i = 0; i < mySeries.length; i++){
        for (var j = 0; j < mySeries[i].data.length; j++){
            if (j == 0) continue;
            var x = mySeries[i].data[j][0];
            var y = mySeries[i].data[j][1];
            var lastY = mySeries[i].data[j-1][1];
            var text = (((y - lastY) / lastY) * 100).toFixed(1) + '%'
            var metrics = ctx.measureText(text);
            var xPos = (xaxis.p2c(x)+offset.left) - metrics.width/2;
            var yPos = yaxis.p2c(y) + offset.top - 5;
            ctx.fillText(text, xPos, yPos);
        }
    }
});