This is a migrated thread and some comments may be shown as answers.

Label Clipping Q1 2014

9 Answers 102 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Kevin Kembel
Top achievements
Rank 1
Kevin Kembel asked on 21 Mar 2014, 09:20 PM
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.

9 Answers, 1 is accepted

Sort by
0
Kevin Kembel
Top achievements
Rank 1
answered on 21 Mar 2014, 10:09 PM
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.
0
Daniel
Telerik team
answered on 25 Mar 2014, 04:30 PM
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
 

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

 
0
Kevin Kembel
Top achievements
Rank 1
answered on 25 Mar 2014, 05:01 PM
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?
0
Daniel
Telerik team
answered on 27 Mar 2014, 11:30 AM
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
 

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

 
0
Intelleqt
Top achievements
Rank 1
answered on 02 Apr 2014, 09:45 AM
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?
0
Daniel
Telerik team
answered on 04 Apr 2014, 07:08 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Intelleqt
Top achievements
Rank 1
answered on 16 Apr 2014, 03:30 PM
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.
0
Michaël
Top achievements
Rank 1
answered on 16 Apr 2014, 10:30 PM
Hi,

I'm experiencing the same issue with markers.
0
Daniel
Telerik team
answered on 17 Apr 2014, 01:47 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
Kevin Kembel
Top achievements
Rank 1
Answers by
Kevin Kembel
Top achievements
Rank 1
Daniel
Telerik team
Intelleqt
Top achievements
Rank 1
Michaël
Top achievements
Rank 1
Share this question
or