Pie chart series label lines are backwards

1 Answer 34 Views
Chart
Jay
Top achievements
Rank 1
Iron
Veteran
Jay asked on 16 Dec 2021, 08:58 PM

I am having some odd behavior in our application where it appears the series label lines are being rendered backwards (see backwards.png). I am trying to construct a test case that displays this behavior, but I haven't had any luck, I just get the correct positioning (see correct.png).

Does anyone here have any thoughts on what might be causing this? Some obscure CSS setting or such?

 

1 Answer, 1 is accepted

Sort by
0
Yanislav
Telerik team
answered on 21 Dec 2021, 01:21 PM

Hello Jay,

Unfortunately, I wasn't able to reproduce the problem when I tested locally. Everything seems to be working as expected.

However, since this behavior is unexpected, my suggestion is to check if there is any custom CSS applied that may affect the lines and the Chart. Also, a good idea is to check the loaded CDN files.

For example, when using Kendo Sass theme, and a Less file like the following one is loaded too, might lead to a similar problem:

<link href="https://kendo.cdn.telerik.com/2021.3.1109/styles/kendo.common-bootstrap.min.css" rel="stylesheet" type="text/css" />

So make sure the theme is properly loaded and if you are using a SASS theme, remove any unnecessary theme files, like the one shown above. Leave only the reference to the SASS theme file.

At your end, if you still don't find the reason for this issue may I ask you to capture a Fiddler Jam log by following the guidelines in this article: 

https://docs.telerik.com/aspnet-mvc/integration-with-other-telerik-products/capture-issues-with-fiddler-jam


The log allows us to mock the page and examine the behavior and the related network activity and could help us identify what causes the problem. Note that after the recording has started, the page should be fully refreshed.

Looking forward to hearing back from you.

Regards,
Yanislav
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Jay
Top achievements
Rank 1
Iron
Veteran
commented on 21 Dec 2021, 07:18 PM

Hi Yanislav. I was able to recreate it, and here is a dojo. The problem occurs when specifying distance on the labels, apparently if the distance is too small? I know very much older versions did not have this issue, but I don't know specifically when it changed.

If you remove the "distance: 10" setting on the labels, they will be drawn correctly.

Eyup
Telerik team
commented on 24 Dec 2021, 06:38 AM

Hi Jay,

Thank you for preparing the sample - it allowed us to figure out the exact case.

And yeah, you are correct. The issue is related to the distance property which has a default value of 35. I am afraid with lesser values than that it won't work properly:
https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.labels.distance#serieslabelsdistance

So I highly suggest that you set some greater value like 50 and the issue will be resolved:
https://dojo.telerik.com/eZuvOlaZ

Tags
Chart
Asked by
Jay
Top achievements
Rank 1
Iron
Veteran
Answers by
Yanislav
Telerik team
Share this question
or