Too much code to paste here so....

Please see JS Fiddle at / for current code.

I am attempting to create a horizontal bar chart using flot. As you will see from the Fiddle, this works fine but I want to display the values of the bars within the bars themselves and not as labels in the Y Axis, as in the picture below...

I have attempted to use the "labels" plugin and also the barnumbers plugin but these don't seem to work. (Barnumbers es close but displays 0 1 2 3 as the values.

Any ideas?

Too much code to paste here so....

Please see JS Fiddle at http://jsfiddle/1a2s35m2/ for current code.

I am attempting to create a horizontal bar chart using flot. As you will see from the Fiddle, this works fine but I want to display the values of the bars within the bars themselves and not as labels in the Y Axis, as in the picture below...

I have attempted to use the "labels" plugin and also the barnumbers plugin but these don't seem to work. (Barnumbers es close but displays 0 1 2 3 as the values.

Any ideas?

• javascript
• jquery
• flot

• 1 Have a look at this link. Here is a good example – Blake Commented Nov 17, 2014 at 15:43

1 Answer 1

I'm really starting to sound like a broken record on here, but as your charts bee really plicated forget the plugins and do it yourself.

Here's modified code from my links above catered for how you drew your plots:

    // after initial plot draw, then loop the data, add the labels
    // I'm drawing these directly on the canvas, NO HTML DIVS!
    // code is un-necessarily verbose for demonstration purposes
    var ctx = somePlot.getCanvas().getContext("2d"); // get the context
    var allSeries = somePlot.getData();  // get your series data
    var xaxis = somePlot.getXAxes()[0]; // xAxis
    var yaxis = somePlot.getYAxes()[0]; // yAxis
    var offset = somePlot.getPlotOffset(); // plots offset
    ctx.font = "12px 'Segoe UI'"; // set a pretty label font
    ctx.fillStyle = "black";
    for (var i = 0; i < allSeries.length; i++){
        var series = allSeries[i];        
        var dataPoint = series.datapoints.points; // one point per series
        var x = dataPoint[0];
        var y = dataPoint[1];  
        var text = x + '%';
        var metrics = ctx.measureText(text);        
        var xPos = xaxis.p2c(x)+offset.left - metrics.width; // place at end of bar
        var yPos = yaxis.p2c(y) + offset.top - 2;
        ctx.fillText(text, xPos, yPos);
    }

Updated fiddle.