We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Legend Width

Is it possible to have the legend take up the entire width of the chart, including the axes?  Is it possible to have the legend wrap to a new line based on the text in the legend and the width of the legend instead of creating horizontal scroll bars?  I have attached a picture to indicate the situation.  I would ideally like the chart legend to be able to show its contents without scroll bars unless the legend cannot fit a legend item in a single row or its contents in the available height.  It should at least use the space under the axes. 



Attachment: ChartLegendConfig_ea075253.zip

6 Replies

AT Anandaraj T Syncfusion Team March 6, 2015 01:05 PM UTC

Hi Josh,

Thanks for using Syncfusion products.

We have analyzed your query and found that feature request for “Enabling or disabling the scroll bar in legend” has been logged already. A support incident to track the status of this feature has been created under your account. Please log on to our support website to check for further updates

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

Please let us know if you have any concern.

Regards,

Anandaraj




JB Josh Bowen March 6, 2015 01:51 PM UTC

Is it possible to have the legend take up space under the axes? 


CJ Chris John March 6, 2015 02:06 PM UTC

I have come to the forum to ask exactly the same questions as Josh! Can the legend automatically wrap to additional lines as necessary? And can the legend (and Chart Title & Subtitle for that matter) left align to the whole chart, rather than just where the Y Axis is?
Thanks


AT Anandaraj T Syncfusion Team March 9, 2015 10:12 AM UTC

Hi ,

Thanks for the update.

Query #1: Is it possible to have the legend take up space under the axes?

By default, Chart legend will use the available space under the axes when it is positioned at the bottom of chart. Legend will be displayed with scroll bar only in the following cases

      1. If width and height is set to legend

                a) Scroll bar will appear if the provided width and height values for legend is less than the required width and height

                b) Legend item will be added to next row or column if enough space is not available in the current row or column

      2. If legend is not assigned specific width or height

a. Scroll bar will appear  if width required for legend is greater than 20% of the width of chart when legend is at left or right position

b. Scroll bar will appear  if height required for legend is greater than 20% of the height of chart when legend is at top or bottom position

Legend width and height can be specified in either pixel or percentage. For example setting the value 100 for legend width will display legend with 100 pixel width and setting 10% as value to legend width will display legend with 10% of the width of the chart. By default legend will take a maximum of 20% of chart width (for left and right positions) or height (for top and bottom positions) and 80% for chart area. This can be changed as required by setting width or height in percentage to legend.

Please refer Chart Legend for more information about Chart legend.

Our online sample to demonstrate the behavior of legend  is available in the following link

http://js.syncfusion.com/demos/web/#!/azure/chart/chartcustomization/legendposition

The following screenshot displays chart legend without scroll bar

The following screenshot displays chart legend with scroll bar after setting 400 pixels width

Query #2: Can the legend wrap to additional lines as necessary?

Legend will wrap items to next row or column automatically if enough space is not available in a single row or column.

Query #3: Can the Legend, Title and Subtitle left align to the whole chart, rather than just where the Y axis is?

Legend, Title and Subtitle will be aligned with respect to chart area and not to entire chart because this is their default behavior.

Please let us know if you have any concern.

Regards,

Anandaraj




JB Josh Bowen March 9, 2015 08:39 PM UTC

I have some concerns. 

Query #1: Your answer is incorrect.  The chart legend does not use the available space under the axes.  It only uses the space under the chart area.  I believe you admit to this in your response to query #3.  Could you please clarify?  Also, the phrase 'If width and height is set to legend' is confusing.  Do you mean to say 'If you set both the legend width and legend height?' 
Query #2:  Your image displays a legend wrapping onto a second line, but not early enough to prevent the need for horizontal scroll bars.  The horizontal scroll bar then makes the legend space small enough that the vertical scroll bar is necessary.   It would make more sense if the line would wrap earlier so that only vertical scroll bars are displayed and not horizontal ones.  Could you please add a feature request to wrap text in the legend so that the space lost to scroll bars is minimized? 
Query #3:  I have users complaining that the legend is too small because it cannot take up space under the axes.  If it is not possible to use that space in the current version of the library, could you please add a feature request? 

In case there is some confusion about the behavior of the chart please see the attached demonstration page. 

Attachment: Mar2015_a79b624d.zip


AT Anandaraj T Syncfusion Team March 10, 2015 08:32 AM UTC

Hi Josh,

Sorry for the inconvenience caused.

Query #1: Your answer is incorrect

Sorry for the misunderstanding, the response provided by us for the first query is related to horizontal axis not for vertical axis.

Query #2: Could you please clarify?

We can specify width and height to the legend. If only legend width is specified, then legend height will be calculated automatically and scroll bar will appear when width required for legend is greater than specified width or calculated height is greater than 20% of the height of the Chart.

Query #3: Could you please add a feature request to wrap text in the legend so that the space lost to scroll bars is minimized?

We have added a feature request for your requirement and a support incident to track the status of this feature has been created under your account. Please log on to our support website to check for further updates

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

Query #4: I have users complaining that the legend is too small because it cannot take up space under the axes.  If it is not possible to use that space in the current version of the library, could you please add a feature request?

We have analyzed the reported behavior for vertical axes and added a feature request. A support incident to track the status of this feature has been created under your account. Please log on to our support website to check for further updates

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

Please let us know if you have any concern.

Regards,

Anandaraj



Loader.
Live Chat Icon For mobile
Up arrow icon