Vertical bars valued with Flot.js

Question

Hello.

I use the Flot.js to plot a graph "Stacked Bars" example but I wanted to insert the bar values "inside" the bar, and not simply in the tooltip.

Someone knows how to do?

Answer 1

There is a plugin to do this. I found it a while ago when I was working on a adapting that I made from Flot to Mootools.

The plugin link is: https://github.com/leonardoeloy/flot-valuelabels

The new part needed to options is , for example:

series: {
    valueLabels: {
        show: true,
        showAsHtml: true,
        labelFormatter: function (v) {
            return v + '%';
        }
    },

You’ll probably have to adapt the exact position of the value with CSS like I did in the example using margin-top: 20px;. This plugin also has the advantage of having a function to change the values, ie add the percentage symbol or run a function on the values that shows.

Note that there is still another plugin to stack the bars, the stack (which I added to my example too). The graph works also without it but the bars are behind each other instead of on top of each other.

Example