Label Clipping Q1 2014

[Kevin Kembel]

Having an issue with labels being clipped when they are beyond the chart but still within the plot area.  I've attached two screenshots of the same data and options for the chart in Q3 2013 compared to Q1 2014.

Some browsers clip the labels when they go beyond the boundaries of the chart canvas, which I guess is understood.  In Q3 2013, I would simply add padding using chartArea.margin so that the labels would always be within the boundary of the canvas and they wouldn't be clipped in some browsers.

It looks like this isn't working anymore, and the labels are being clipped even if you have plenty of margin space above your chart. Is there any way I could prevent my labels from being clipped in some browsers with Q1 2014?  I have this happening on quite a few of the charts in my system, it seems to be a really common issue any time I use labels.

[Kevin Kembel]

As I go through the differences, I notice that this has a few negative effects in some other areas.  Line charts are partially clipped as well whenever they are at the top of the chart.  Here's a screenshot of a line chart that shows a line chart with 0% - 100% scale, and the line running along the top.

Half of the line is cut off (it's supposed to be twice as thick), and half the points are cut off.  This is an actual example of a trend line on our dashboard that is expected to stay at 100%, anything less is a cause of concern, so it's a real example.

The chart is set with:
plotArea: { margin: 10 },
chartArea: { margin: 0 }

I tried tweaking a few settings to try and get it to display the line properly, but no matter what I try a line plotted on the maximum of the axis is always partially cut off.

[Daniel]

Hello,

We introduced clipping between the axes in order to be able to correctly plot segments that span beyond the specified min and max values. We will consider exposing an option on the chart to enable or disable this behavior and also to move the labels out of the clipping container for points that fall into the specified range for the service pack. For now in order for the entire point and label to be shown, you need to adjust the max value that you are using.

Regards,
Daniel
Telerik

 

 

[Kevin Kembel]

I noticed the way values above the max are plotted correctly out of bounds now.  Although in my case, I really liked the way those points were constrained to the maximum value in Q3 2013, when they are plotted out of bounds the user can't hover/tooltip for feedback or specifics on that point.  But, doing it this way is consistent with other charting systems I think (like Excel), so I understand the decision to go that route.  I can always compare points to my specified maximum and plot them at the max value anyways.

I do hope that the clipping abilities can be customized in some way though, like you suggested.  

I'm curious though, does using plotArea.padding instead of plotArea.margin fix this issue?  I've already reverted back to Q3 2013, and can't recall if I tried setting padding instead of margin, but I think I did?

[Daniel]

Hello again,

Thank you for the feedback. 
Regarding the padding - it will not work for this scenario. Adding podding will shrink the axes but so will the clipping container.

Regards,
Daniel
Telerik

 

 

[Intelleqt]

Having the same issue with the label being out of bounds. This is really a game breaker for us since we really do not want to adjust the max value for the charts due to demands from our customers. Guess the only way for us is to revert back to a previous release then?

[Daniel]

Hello,

We have moved the labels out of the clipping container and have added "clip" option to the pane that can be used to enable or disable the clipping. Both changes will be available in the service pack and in the next internal build.

Regards,
Daniel
Telerik

 

 

[Intelleqt]

That's great! I have installed the latest SP and the label is now displayed as intended. But I still have problems with clipping on some line charts and I cannot find the new 'clip' option, which I presume will solve this issue? Can you point me in the right direction please.

[Michaël]

Hi,

I'm experiencing the same issue with markers.

[Daniel]

Hello,

The pane clip option can be used to disable the clipping.
The markers are not moved out of the clipping container because this will cause problems with the highlight functionality. You can use the clip option if you do not wish to clip them.

Regards,
Daniel
Telerik