Show value within the bar - jQuery plot horizontal stacked bar chart

Question

I would like to show the value within the bar on the flot bar chart (horizontal and stacked), something like this :

|-------------------------------------------
|                 5                 |   1  |
|-------------------------------------------
|
|------------------------------------
|           3         |       2     |
|------------------------------------

I saw this post : Show value within bar on flot bar chart The values appears only inside the first stacked bar. The second value is the current total, not the corresponding value of the current bar, eg :

|-------------------------------------------
|                 5  6               |     |
|-------------------------------------------
|
|------------------------------------
|           3 5        |            |
|------------------------------------

Do someone know a good plugin for this functionality? Also, I would like to increase the font size inside the bar.

Thank you!

---

Here the code :

<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.pie.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.stack.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.barnumbers.js"></script>

var data = [
        {label: 'Label 1', color:"#80FF80", data: [[1,5], [2,3]]},
        {label: 'Label 2', color:"#FF8080", data: [[1,1], [2,2]]}
];

//reverse data for horizontal
for (series in data){
    var s = data[series];
    for (i=0;i<s.data.length;i++){
            var tmp = s.data[i][0];
        s.data[i][0] = s.data[i][1];
        s.data[i][1] = tmp;        
    }
}

var options = {
    series: {
        stack: 0,
        lines: {show: false, steps: false },
        bars: {
            show: true, 
            barWidth: 0.5, 
            align: 'center', 
            horizontal: true, 
            showNumbers: true
        },
    },
    yaxis: {ticks: [[1,'Category 1'], [2,'Category 2']]},
};

$.plot($("#flot-example-2"), data, options);

Answer 1

I've updated flot-barnumbers to support stacked bars, see the updated examples. If you need any other features, shoot me an email or open an issue, I only saw this question by chance.

Answer 2

It seems that flot-barnumbers doesn't support stacked bar chart. That's why value labeled improperly. I'd recommend to use jqBarGraph, which is jQuery plugin to implement stacked bar charts.

http://workshop.rs/jqbargraph/

I hope that it helps.

Answer 3

I finally decided to use Highcharts Plugin because it is much better documented and it works well!