RadPieChart.Palette as bound property breaks ShowLabels

[Rinke]

I would like to set the colors for my pie chart dynamically based on the categories of data available. The RadPieChart.Palette property seems a solution for this, as its bindable and the custom bound colors are indeed picked up by the control as expected. So far so good. However, when enabling label rendering via the ShowLabels property, rendering of the labels becomes problematic. See picture.

Example code (fragment):

01.<ListView.Header>
02.    <Grid IsVisible="{Binding ListSource, Converter={StaticResource ItemsSourceNotEmptyConverter}}">
03.        <Grid.RowDefinitions>
04.            <RowDefinition Height="3*" />
05.            <RowDefinition Height="*" />
06.        </Grid.RowDefinitions>
07.
08.        <StackLayout Margin="0,5,0,0" Orientation="Vertical">
09.
10.            <Label
11.                HorizontalTextAlignment="Center"
12.                Style="{StaticResource DefaultCaptionStyle}"
13.                Text="{i18n:Translate verrichtingCategoryCounts}" />
14.
15.            <telerikChart:RadPieChart
16.                x:Name="chart" BackgroundColor="Transparent"
17.                Palette="{Binding ChartPalette}">
18.                <telerikChart:RadPieChart.Series>
19.                    <telerikChart:PieSeries
20.                        ItemsSource="{Binding ChartDataSeries}"
21.                        LegendTitleBinding="Legend" ShowLabels="True">
22.                        <telerikChart:PieSeries.ValueBinding>
23.                            <telerikChart:PropertyNameDataPointBinding PropertyName="Value" />
24.                        </telerikChart:PieSeries.ValueBinding>
25.                    </telerikChart:PieSeries>
26.                </telerikChart:RadPieChart.Series>
27.            </telerikChart:RadPieChart>
28.        </StackLayout>
29.
30.        <ScrollView Grid.Row="1">
31.            <telerikChart:RadLegend
32.                x:Name="chartLegend" Margin="8,0,8,8"
33.                LegendItemFontSize="{extensions:FontSize Small}"
34.                LegendProvider="{x:Reference Name=chart}"
35.                Orientation="Vertical">
36.                <telerikChart:RadLegend.LegendItemIconSize>
37.                    <Size Width="6" Height="6" />
38.                </telerikChart:RadLegend.LegendItemIconSize>
39.            </telerikChart:RadLegend>
40.        </ScrollView>
41.    </Grid>
42.</ListView.Header>

 

 

[Rinke]

Environment:

UI for Xamarin R1 2018 (version 2018.1.315.240)

Visual Studio Enterprise 15.6.3

Xamarin Forms 2.5.0.280555

Android support 26.1.0.1

[Stefan Nenchev]

Hello, Rinke,

Thank you for the detailed information. I have tried reproducing the behavior but did not observe the issue. Can you have a look at the attached sample and  test it at your end as well? How it differs from your setup? Would it be possible to modify it and send it over so I can have a more detailed look?

Have a great rest of the week.

Regards,
Stefan Nenchev
Progress Telerik

[Rinke]

Hi Stefan,

The big difference is probably that your example project sets the palette in the ViewModel constructor, while I use the Prism framework to update the 'ChartPalette' property in the Prism 'OnNavigatedTo' event. The particular screen i'm using pie chart in needs a parameter passed via that event. Sorry for not mentioning that beforehand.

Not sure how to reproduce that in your sample without introducing Prism.

 

[Stefan Nenchev]

Hello, Rinke,

I will try reproducing the scenario in a basic MVVM Prism application, however, could you confirm on which platforms the issue can be observed? Does it affect all of them or just a specific one? Actually, if you can isolate the issue in a sample that uses MVVM prism, it will be great if you can provide us with such so we can be sure of your exact scenario. 

I am looking forward to your reply.

Regards,
Stefan Nenchev
Progress Telerik

[Rinke]

Hi Stefan,

The problem occurs only on Android (LG Nexus 5x Android 7.1.2, API 25), it works fine on my iPhone SE iOS 11.2.5 device.

I did not manage to setup an isolated test project yet.

Regards,

Rinke

[Ves]

Hi Rinke,

A subtle detail about palette on Android is that the labels are drawn using the first palette entry's StrokeColor. So, please do set it and see if it makes a difference. If it still does not appear, we'll appreciate if you can send us an example where we can debug the problem. Thank your.

Best regards,
Ves
Progress Telerik

[Rinke]

Ah, the StrokeColor did the trick, so that resolves the issue. Thanx!

It might be a good idea to include this in the docs. I actually expected a standard default, for example Black. The actual behaviour made me search in the wrong direction.

Regards,

Rinke

[Stefan Nenchev]

Hi, Rinke,

I am glad to see that the issue is resolved now. We have added a note in the Custom Palette article that suggests what the behavior in Android is and it will be live with the next update of the documentation. Thank you for the suggestion.

Regards,
Stefan Nenchev
Progress Telerik