FlexChart Legend Alignment - Not Consistent

FlexChart Legend Alignment - Not Consistent

Posted by: reece.gallaway on 7 May 2019, 7:35 am EST

• 

  reece.gallaway

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 7 May 2019, 7:35 am EST

  I have a series of charts on a page and there seems to be some discrepancy to do with the alignment of the legends.

  When the names are small enough to fit on one line, the legend is center aligned, when the labels grow big enough to make it word wrap it then becomes left aligned, why is this?

  It would be good if they had some consistency with their alignment as all of our legends are shown at the bottom of the charts.

  Example: https://jsfiddle.net/Reecio/2urazxf3/

  As your resolution might be different to mine, I kept adding the word “Really” to the longNames display value until the legend was forced to word wrap.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 8 May 2019, 7:30 am EST - Updated 3 October 2022, 8:04 pm EST

  Hi,

  This is the design behaviour for legends. When there is enough space available for all legends to be drawn in the same row then they are centred align however if all legends cannot fit into the same row then they are left aligned otherwise the labels might look weird.
  
  Further, could you please let us know how do you expect the label to be rendered? We have attached an image with centred labels, please have a look at it and let us know if this is the behaviour what you want or do you have a different requirement.

  ~sharad
  
  

  

  869×299 11.7 KB

• 

  reece.gallaway

  • Post Options:
  • Link
    Copy

  Posted 9 May 2019, 5:06 am EST

  Hi Sharad,

  Yes that is the behaviour I want, I assume that the content is left aligned and its the legend itself that centered? Which is why smaller text appears centered?

  Essentially there is a property to align the title of the legend, so I would have thought that you would have similar one for the legend content.
  
  Also maybe have another property to control if the colour key is before or after the description.

  i.e. Someone may want to have the legend title centered, the content right aligned and the colour key at the end of the text.

  Regards,

  Reece

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 10 May 2019, 5:32 am EST

  Hi Reece,

  You may handle the rendered event and update the position of the legend to get the required functionality. Please refer to the following sample which demonstrates the same:
  
  https://jsfiddle.net/ajkrxuwe/14/

• 

  reece.gallaway

  • Post Options:
  • Link
    Copy

  Posted 10 May 2019, 10:37 am EST

  Thanks Sharad.

  Hope this is still being considered for built in functionality rather than employing an override?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 13 May 2019, 4:33 am EST

  We have added an enhancement request to support customization of alignment for the legend items(Internal tracking ID #379230). We will let you know about any updates regarding the same.