Show text whitin the bar - jQuery plot Vertically stacked bar chart

Question

I would like to show labels on each series of the stacked bar.Any idea please. I have been looking with no luck. For example if you have blue series text will be blue on the series of the stacked bar and so on.

It should be something like that as you can see in the image :

Here is my code:-

    <div id="placeholder" style="width:600px;height:300px;"></div>
    var data = [
    {label: 'foo', color:'red', data: [[1,300], [2,300], [3,300], [4,300], [5,300]]},
    {label: 'bar', color:'blue', data: [[1,800], [2,600], [3,400], [4,200], [5,0]]},
    {label: 'baz', color:'yellow', data: [[1,100], [2,200], [3,300], [4,400], [5,500]]},
     ];

      $.plot($("#placeholder"), data, {
      series: {
      stack: 1,
      bars: {
        show: true,
        lineWidth: 1,
        barWidth: 0.8,
        order: 1, 
        fill: true, 
            label: {
            show: true,
            radius:0.7,

            formatter: function(label, series) {
                 var result =[ <?php echo $red; ?> ,<?php echo $blue; ?> ,<?php                 
            echo $yellow; ?>

            ];

              if ( label == "red")
               { 
                 return '<div style="font-size:13px; text-align:center; left:-340px; top:-338px;                       
               position:absolute; color:white;">'+label+'<br/>'+(result[0])+'</div>';
               }
               else if (label == "blue")
               { 
                 return '<div style="font-size:13px; text-align:center; left:-343px; top:-228px;                         
                    position:absolute; color:white;">'+label+'<br/>'+(result[1])+'</div>';
               }
               else if (label == "yellow")
               { 
                 return '<div style="font-size:13px; text-align:center; left:-325px; top:-220px;  
               position:absolute; color:white;">'+label+'<br/>'+(result[2])+'</div>';
               }



           },
            background: {
                opacity: 0.8,

            }
        }     
    },
    yaxis : {
        min : 0,
        tickLength: 0
    } ,
    xaxis: {
    tickLength: 0,
    axisLabel: "Date",
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelFontFamily: 'Arial',
    axisLabelPadding: 3,
    color: "#838383",
    timeformat: "%b/%y"
    }
    }
    });

You just asked the same question. It was closed as a duplicate. Did you look at those questions and attempt to implement the solution they provided? We aren't here to do your work for you. — Mark, Dec 11 '14 at 22:33

score 0 · Accepted Answer · answered Dec 11 '14 at 20:00

0

You should be able to use the valuelabels plugin to get this to work.

Reference: https://github.com/winne27/flot-valuelabels/wiki

Download: https://github.com/winne27/flot-valuelabels/blob/master/jquery.flot.valuelabels.js

Basic example: http://jsfiddle.net/WetNoodles/6b8n4nhe/1/

With the plugin, you can specify these options on each data series:

valueLabels: { show: true, valign: 'middle' }

answered Dec 11 '14 at 20:00

Wet Noodles

755
7
15

It prints the value is it possible to print a text instead of value ? Many thanks for your kind help. – Zina Dweeikat Dec 12 '14 at 09:52
You're welcome! You should be able to use the `labelFormatter` option in the `valueLabels` object. Unfortunately, it does not look like it has any default way to convert to dates like flot does, but hopefully your values won't be too tough to convert to months. – Wet Noodles Dec 12 '14 at 12:17
You see the sky color how I can change it to green ? Thank you so much – Zina Dweeikat Dec 12 '14 at 16:02
and I would like to have a bigger size for valueLabels ?How do I change it ? Thank you – Zina Dweeikat Dec 12 '14 at 16:03
You can use the `'font-color'` and `font` options which take any valid css value. You can see all these options at this link https://github.com/winne27/flot-valuelabels/wiki – Wet Noodles Dec 12 '14 at 16:32
Thank you.How to increase the size of the ValueLabels with the example you had in JSFiddle ? Thanks a lot – Zina Dweeikat Dec 12 '14 at 16:45
It looks like you have to specify both a font size and a family. Here's is an updated link with the example: http://jsfiddle.net/WetNoodles/6b8n4nhe/2/ – Wet Noodles Dec 12 '14 at 18:20

Show text whitin the bar - jQuery plot Vertically stacked bar chart

1 Answers1