Pie chart labels don't display correctly in Mobile

[Jun]

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.

[Denitsa]

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

[Jun]

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.

[Jun]

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.

[Denitsa]

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