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);

Trevatrevah

Can you post your code? codepen.io/pen – Betide

Sorry, I just added the code, thank you ! – Trevatrevah

You can see the demo here : codepen.io/anon/full/mrbdK – Trevatrevah

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.

Anoxemia

1st question: how can I format the numbers? 2nd question: how can I show these values just on mouse hover? Thanks. @Anoxemia – Confession

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.

Twandatwang

Answer 3

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

Trevatrevah