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

Failing to correctly position pie chart labels

7 Answers 466 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 1
Veteran
Ron asked on 04 Feb 2019, 03:57 PM
Hello, 
Please review the following dojo: https://dojo.telerik.com/EFuQANOF/2 
As you can see the upper labels look good (correct distance from chart as we need them to be) but the lower labels are incorrectly positioned over the chart itself.


It looks better in this other dojo: https://dojo.telerik.com/oWAWilAt 
But here we do not want the lines to be shown at all (we want the numbers to “float” next to the chart, like in the first dojo).


Can you please advise how we may fix the lower labels position of the first dojo so they will not override the chart but instead will appear outside the chart, similarly to the uppper labels?


Thanks

7 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 06 Feb 2019, 11:05 AM
Hi Ron,

If the position of the labels when using the "outsideEnd" position looks good to you, you can just hide the connector lines by applying them a transparent color:
seriesDefaults: {
  labels: {
    template: "#= category # \n #= kendo.format('{0:P}', percentage)#",
    position: "outsideEnd",
    visible: true,
    distance: 15,
    background: "transparent"
  },
  connectors: {
    color: "transparent"
  }
}

Here is the updated example:
https://dojo.telerik.com/oWAWilAt/3

Regards,
Tsvetina
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ron
Top achievements
Rank 1
Veteran
answered on 06 Feb 2019, 02:57 PM

Thanks Tsvetina,

It does look better. Yet sometimes the position when using outsideEnd position is confusing - see for example the location of “Tennis” in your dojo.

Is there a way to fix the dojo we sent with “auto” positioning?

Thanks,

Ron.

0
Tsvetina
Telerik team
answered on 07 Feb 2019, 04:41 PM
Hi Ron,

The "auto" position is only meant for rangeArea and verticalRangeArea series. You can see this listed in the documentation of the series.labels.position property. This being said, I noticed that you can adjust the labels position in this specific case by setting negative top padding to them:
https://dojo.telerik.com/EFuQANOF/6

However, since this position option has not been implemented with donut series in mind, I cannot guarantee that this workaround will work in all cases and will remain valid in future versions of Kendo UI.

Currently, the only valid position that puts the labels outside of the donut segments is "outsideEnd", but it includes the connectors in the position calculation and that is why the labels are a bit offset in some cases. 

Regards,
Tsvetina
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ron
Top achievements
Rank 1
Veteran
answered on 11 Feb 2019, 04:59 PM

Thanks Tsvetina,

We prefer to avoid such workarounds and find a real solution.

Using “outsideEnd” with all those connecting lines does not look good and fail to match the design we need. Since by hiding the lines we end up with misplaced labels, it seems like kendo currently cannot supply us the desire chart and we will need to look for alternatives. For the long run and as a long time customer I will appreciate if you can add such pie label positioning as a feature request.

Ron.

 

 

0
Tsvetina
Telerik team
answered on 13 Feb 2019, 03:11 PM
Hi Ron,

Indeed, with the current available label positions, your requirement cannot be achieved out of the box. It would be possible to make a custom implementation where you hide the labels and add custom text to the series.visual at a manually calculated position. This, however, would require custom logic to determine the label position in accordance to the currently created series segment.

You can add a feature request in the feedback portal, so you can get notified if it gets approved and scheduled for implementation:
Progress® Kendo UI® Feedback Portal


Regards,
Tsvetina
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Vineesh
Top achievements
Rank 1
answered on 27 Apr 2020, 11:31 AM

Can we able to set label outside chart as like in the screenshot attached ?

 

0
Tsvetomir
Telerik team
answered on 28 Apr 2020, 05:32 PM

Hi Vineesh,

The screenshot that you have provided appears to have the values and series names listed inside the legend element. If that is the case, you could achieve the same by setting the legend's label template. Check out the example at:

https://dojo.telerik.com/UNaPiSOj

Regards,
Tsvetomir
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Charts
Asked by
Ron
Top achievements
Rank 1
Veteran
Answers by
Tsvetina
Telerik team
Ron
Top achievements
Rank 1
Veteran
Vineesh
Top achievements
Rank 1
Tsvetomir
Telerik team
Share this question
or