Failing to correctly position pie chart labels

[Ron]

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

[Tsvetina]

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

[Ron]

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.

[Tsvetina]

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

[Ron]

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.

 

 

[Tsvetina]

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

[Vineesh]

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

 

[Tsvetomir]

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