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

Donut chart on mobile

1 Answer 6 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Ollie
Top achievements
Rank 1
Iron
Ollie asked on 27 Feb 2017, 10:27 PM

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?

 

1 Answer, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 01 Mar 2017, 03:12 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
Tags
Charts
Asked by
Ollie
Top achievements
Rank 1
Iron
Answers by
Alex Hajigeorgieva
Telerik team
Share this question
or