Results 1 to 7 of 7

Thread: Stacked Bar Chart label on each field?

  1. #1
    Sencha User
    Join Date
    Jan 2015
    Location
    France
    Posts
    6

    Default Answered: Stacked Bar Chart label on each field?

    Hello, is it possible to add a label on each field for all rows of a Stacked Bar Chart (http://docs.sencha.com/extjs/4.2.1/#...tackedBar.html) like the Pie Chart (http://docs.sencha.com/extjs/4.2.1/#...harts/Pie.html)? I have tried adding a label in "series" array but it only shows one label on the first field of a row. If it's not possible with ExtJS library, I could do it natively in SVG using JavaScript DOM APIs. Thanks.

  2. Quote Originally Posted by bapt View Post
    Hello, is it possible to add a label on each field for all rows of a Stacked Bar Chart (http://docs.sencha.com/extjs/4.2.1/#...tackedBar.html) like the Pie Chart (http://docs.sencha.com/extjs/4.2.1/#...harts/Pie.html)? I have tried adding a label in "series" array but it only shows one label on the first field of a row. If it's not possible with ExtJS library, I could do it natively in SVG using JavaScript DOM APIs. Thanks.
    Hi bapt--

    Yes, it's definitely possible. You need to configure your label with all the fields that will be displayed. Please see the example Fiddle below.

    I hope this helps--thanks!
    Joel


  3. #2
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Quote Originally Posted by bapt View Post
    Hello, is it possible to add a label on each field for all rows of a Stacked Bar Chart (http://docs.sencha.com/extjs/4.2.1/#...tackedBar.html) like the Pie Chart (http://docs.sencha.com/extjs/4.2.1/#...harts/Pie.html)? I have tried adding a label in "series" array but it only shows one label on the first field of a row. If it's not possible with ExtJS library, I could do it natively in SVG using JavaScript DOM APIs. Thanks.
    Hi bapt--

    Yes, it's definitely possible. You need to configure your label with all the fields that will be displayed. Please see the example Fiddle below.

    I hope this helps--thanks!
    Joel


  4. #3
    Sencha User
    Join Date
    Jan 2015
    Location
    France
    Posts
    6

    Default

    Thank you, I didn't pay attention to this part of the label documentation, indeed the field can take a string or an array of strings. Now it almost works but some values are not displayed because the field is too small and the value seems too high, see my Fiddle https://fiddle.sencha.com/#fiddle/hic (it works if you divide value by 100 like in the line I've commented). I have noticed that the Fiddle is missing labels on 2 fields but when I'm working on localhost with ExtJS 4.2.1 GPL too, it's only missing a label on 1 field (Brand1 and not Brand2).



    By the way, I want to have the chart with 100% as maximum value in y axis, so I used a Model and the convert function. In the labels, I do not want to display the percentage but another value that I have in a JsonStore. In the label renderer, I used this code (in variableName_data, I stored the real value of variableName percentage):
    Code:
    storeItem.get(item.yField + "_data")
    Maybe you know a better way to display another value from the Store?

    Edit: in fact, I can do this without the label renderer by using directly the fields I want:
    Code:
    field: ['expediees_data', 'preparees_data', 'reste_data']

  5. #4
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Interesting, I'm not sure what's going on. When I modify the chart that I posted to return the raw value, all of the labels render, even if the text is too big to be contained by the segment. You might check your data to make sure that it is being converted correctly.

    Thanks!
    Joel

  6. #5
    Sencha User
    Join Date
    Jan 2015
    Location
    France
    Posts
    6

    Default

    I've checked my data and everything is ok, the percentage data is good and the real data that I want to display in the label is good too. I've tried your Fiddle and returned the raw value in labels like you said, this works. But if you try to return the raw value multiplied by 10 for example, the problem will appear in your chart too if you remove a filter: a label value will be missing. This is what happens on my Fiddle, the label values are greater (real data) than the axes values (percentage data) and it is normal in my case. Could it be a bug of the ExtJS library and is there a workaround? Thanks.

  7. #6
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Ok, I see what you're saying. Yes, this is a bug and looks like it has been resolved in 4.2.2+.

    Thanks
    Joel

  8. #7
    Sencha User
    Join Date
    Jan 2015
    Location
    France
    Posts
    6

    Default

    Thanks for confirming, I see updates 4.2.2 and 4.2.3 are not open source but commercial only. It would have been appreciated if bug fixes where available with GPL license too so everyone can have a better experience of Ext JS and Sencha Fiddle would not fail.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •