RadChart - Auto Scroll and Range to stop labels overlapping

[Carl]

Hi,

We are having a slight issue trying to find a solution for the following issue:

We have a Horizontal Bar Chart, using the RadChart in WPF, and have set the screen up so that the chart proportionally resizes with the resizing of the screen.  The issue that we have is that although we can manually set the ScrollMode, RangeStart and RangeEnd so that the axis labels and the chart values are clearly visible and do not overlap, when the user resizes the screen (and subsequently the chart) the axis labels start to overlap and we loose some of the bar values.

Ideally we are looking for a solution that would allow the chart to dynamically set the ScrollMode, RangeStart and RangeEnd values so that the bars on the chart are always shown at the optimal height to remain clear (or to abide to a minimum height).

Any help on this would be greatly appreciated.

Thanks in advanced

Carl
PSP IT Design & Development

[Nikolay]

Hi Carl,

The easiest approach to handle this issue would be to set MinHeight and MinWidth properties for the chart, so that it would not resize beyond a certain point, at which the labels and/or data would overlap.

All the best,
Nikolay
the Telerik team

[Carl]

Hi Nikolay,

Unfortunately we would not be able to use that perticular solution.  Although it would stop the labels overlapping, it would still mean that when the chart is expanded, it does not make best use of the space by adjusting the zoom.

If this is not something that the RadChart is capable of, may I suggest that this become a future feature of this control.


Many thanks


Carl

[Lancelot]

Hi Carl,

Setting a MinHeight won't hurt your UI in the way you think it might, here's why. For example. lets say that you need at least a 10 pixel tall bar in order to prevent the labels from overlapping. This minHeight of 10 pixels would only be reached when you zoom out. When zooming in, the distance between bars would increase because you are only setting a minimum value as opposed to a set height value which would effect zoomed appearances.

Try find what the minimum value your chart needs to prevent the overlap, to do this start with a small value. This small value is to find the lowest possible number you can use for the minimum height. If the first value you try is too small (the labels still touch another element), slowly increase the size of MinHeight until you reach the threshold where the labels stop overlapping other elements..

That will be your magic number. Now set that value as you MinimumHeight for the entire chart, and test it out in different zoomed scenarios. You'll find that you can zoom in and all the way out without the labels intersecting each other or different parts of the chart.

If you can't make this work, provide me with your project code. I can drill into the issue further and provide you with a solution.

Good Luck!
Lancelot

Note: I have also considered the possibility that you are trying to get the size of the values in the labels smaller. Keep in mind that the fontsize of the label's text will prevent the container holding the value to shrink. You can only zoom out as far as your label's text can shrink. For example, you would need to check if the zoom's value. Lets say the zoom is out to 10%, you should dynamically change fontsize to accomodate such a small chart size. However, it would be detrimental to the user experience if you allowed the chart to be zoomed out to such a small size. Rather, just set a minimumHeight on the bars and be worry free about it getting too small and ruining the UX.

[Carl]

Hi Lancelot

Although I can full appreciate the solution that you have offered, it would not produce the effect that we desire.  It may have been that I have not explained my self.

What we are after is the following:

Assuming that the minimum height of each label would be 20px to ensure that neither the label or the bar overlapped.  If the chart area was 100px height then we could assume that we could safely display 5 labels.

With your solutions, if the chart was resized to 300px, we would still see the same 5 labels but they would occupy 60px each.

The solution that we are looking for would mean that the zoom (or range start/end) would automatically adjust to show 15 labels (as we could safely display 15 labels in a chart area of that size).

The only time that the labels would occupy a space greater than 20px would be if the number of items multiplied by the minimum height (20px in this case) was less than the available chart area height. (e.g. if the chart height was 300px but we only had an item count of 10, the height of each label would be 30px.)

Hope that makes a little more sense.


Many thanks


Carl
PSP IT Design & Development

[Lancelot]

Hi Carl,

Thank you for providing some more detail of the whole picture of what you are trying to achieve. My best recommendation at this point is to use telerik's PIT system to make this feature request. If you are not familiar with PITS (Public Information Tracking System), it allows us to report bugs or request additional features directly to the engineering teams.

Here is the link to PITS http://www.telerik.com/support/pits.aspx#/stats/Release=CurrentRelease/Product=silverlight 

telerik works hard to resolve the issues you see there, as you can tell by the ration of Completed requests to open requests. I was going to start a new issue for you , but it would better for you to do it. This way you can ask for the exact feature you need. Here are the steps:

1. Go to this link http://www.telerik.com/support/pits.aspx#/main/Release=AllReleases/Product=silverlight
2. Enter RadChart into the seachbox and broswe the current requests. You can up-vote other requests as well.
3. Then Click the button "Suggest New"
4. When the dialog pops up, you can enter the relevant info into the fields (keep in mind that the listbox to the right contains other issues that may be similar to your request)
5. Click submit!

I hope this helps and let me know if there is anything else I can do for you.
Lancelot

[Carl]

Hi Lancelot,

Thanks for all you help.  I will get this logged onto the PIT system and hopefully we might see something emerge from the other end :)

Many thanks

Carl
PSP IT Design & Development