Donut chart on mobile

[Ollie]

When viewing a donut chart with long labels and the browser width is very narrow (like on mobile), the label is cutting off and pushing some of the other labels in the legend off the screen.

Any ideas why this is happening?

 

[Alex Hajigeorgieva]

Hi Ollie,

The labels of the Kendo UI DonutChart are drawn first and they take the available space, so the legend labels being cut off should not happen(in theory). However, it seems that in your scenario, there is an element which is wider than the chart which results in wider available space and the labels set in to take advantage of it and get visually cut off.

There are different ways to overcome this issue dependent on your preference, you may use either of these approaches:

- align the legend vertically with the help of legend.orientation

http://dojo.telerik.com/ULamA

- split the labels themselves into more than one line. You can use the legend.labels.template, check if you wish to split them in the template and append '/n'. Here is the overview for the Kendo UI Templates, in case you need some help with the syntax:

http://docs.telerik.com/kendo-ui/framework/templates/overview

- alter the width of the legend

Let me know how you get on.

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress