Displaying Labels on Stacked Bar

Question

I would like to display labels on each stacked bar like blue on blue bar, yellow on yellow bar and so on. Here's my code in JSFiddle:

 [1]:http://jsfiddle.net/Sa_2019/n7r57pv7/

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
    },
    yaxis : {
        min : 0,
        tickLength: 0
    } ,
    xaxis: {
    tickLength: 0,
    axisLabel: "Date",
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelFontFamily: 'Arial',
    axisLabelPadding: 3,
    color: "#838383",
    timeformat: "%b/%y"
     }
    }
   });

Any idea please.

Thank you

Please put the (minimal) code needed to explain your question in the question itself. — AdrianHHH, Dec 11 '14 at 11:12
@AdrianHHH I added my code. I would like to show labels of each series — Zina Dweeikat, Dec 11 '14 at 11:19
@AlokBhat I edited my Question and I added my code. I would like to show labels of each series for examples on blue series it has a label with text "Blue" and so on. — Zina Dweeikat, Dec 11 '14 at 11:21
@AlokBhat I'm trying to display the customized label on each series of bar chart. No idea on how to do this.. Please help me. Label should be displayed inside each bar — Zina Dweeikat, Dec 11 '14 at 11:28

score 0 · Answer 1 · answered Dec 11 '14 at 11:34

0

You can use dataLabels of Highcharts to solve this . the code will be like :-

   plotOptions: {
            column: {
                stacking: 'normal',
                  dataLabels: {
                     enabled: true,
                     color: 'white', 
                          formatter: function () {
                                  //  return the value you want to show on labels.. depends on your data ...
                           console.log(this)
                          }
                  }
            }
   }

something like this you can refer to ... As of know i have added string "random" to it just change that according to your logic ..

http://jsfiddle.net/n1mcs4d1/

answered Dec 11 '14 at 11:34

Alok

512
1
3
15

Is it possible to do it with flot Stacked Bar cause I am using flot. – Zina Dweeikat Dec 11 '14 at 11:36
I did some change on my code and still not working could you have a look at it http://jsfiddle.net/Sa_2019/e98q581L/1/ – Zina Dweeikat Dec 11 '14 at 12:11
I don't have any knowledge about float .. so can't help .. though i found this http://jsfiddle.net/1a2s35m2/1/ – Alok Dec 11 '14 at 13:05
You see the example on JSFiddle the one with High Charts, I can see all the labels have same text "random" How do you change the text for Blue series and change the text again for yellow series ? Any idea please. – Zina Dweeikat Dec 11 '14 at 14:44

Displaying Labels on Stacked Bar

1 Answers1