This is a migrated thread and some comments may be shown as answers.
Pie chart labels don't display correctly in Mobile
4 Answers 15 Views
This is a migrated thread and some comments may be shown as answers.
Jun
Top achievements
Rank 1
Jun asked on 22 Feb 2020, 01:40 PM

Hallo,

I try the demo of Pie chart in my iphone, but it doesn't display correctly with the labels, some of the labels show only a small part, is it is a bugs or need some configuration in the code?, zie screenshot in attach.

4 Answers, 1 is accepted

Sort by
0
Denitsa
Telerik team
answered on 25 Feb 2020, 05:15 PM

Hello Jun,

This effect is due to insufficient width or height of the parent HTML element. In our demo pages, we use specific CSS styles for the sections' containers and it may happen that some widgets don't fit well in some resolutions.

If you plan to use Chart in your application you could specify a minimum width of the parent element to make sure it will fit all the content of the chart including labels. For example:

<div style="min-width:500px;">
    @(Html.Kendo().Chart()
...
    )
</div>

 Finally, thank you very much for bringing this to our attention.

Regards,
Denitsa
Progress Telerik

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Jun
Top achievements
Rank 1
answered on 08 Mar 2020, 03:25 PM

Not working, the labels are not responsive.

Beside 500px doesn't fit the mobile, as iphone 7/8 has only 320px width.

How can I just make that "pie" smaller then? just in order to keep the labels show properly.

0
Jun
Top achievements
Rank 1
answered on 08 Mar 2020, 03:41 PM

If I make the labels visible:"false":

How can I add "percentage" to the "category" and remove that huge empty space between the "pie" and "category"? See screenshot in attch.

0
Denitsa
Telerik team
answered on 09 Mar 2020, 03:20 PM

Hello Jun,

Using my previous suggestion will keep the size of the Chart and scroll it horizontally if it does not fit.

To change the chart size you could use ChartArea width and height properties. Specifying the height will also change the size of the empty space, below the legend. Although it is not possible to completely remove it.

To show the desired text you could use the below template for the Legend labels:

@(Html.Kendo().Chart()
                                    .Name("chart")
                                    .Title("What is you favourite sport?")
                                    .Legend(legend => legend
                                        .Position(ChartLegendPosition.Top)
                                        .Labels(templ => templ.Template("#= text # - #= value #%"))
                                    )

                                    .ChartArea(chartArea => chartArea
                                        .Width(320)
                                        .Height(320)
                                    .Series( ... )
...
)

 

Regards,
Denitsa
Progress Telerik

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Tags
Chart
Asked by
Jun
Top achievements
Rank 1
Answers by
Denitsa
Telerik team
Jun
Top achievements
Rank 1
Share this question
or