Customizing Donut Series

[Benjamin]

I would like to know how do I perform the following

• Box up the whole legend.(refer to image 1)
• change the position of tooltip to where cursor is. (refer to image 2)
• in the tooltip, format the value as the percentage of the overall value

[Muneesh Kumar G]

Hi Benjamin,  

 

Greetings from Syncfusion, currently we are validating your requirements. We will update you the status of this on September 3rd, 2019. We appreciate your patience until then.  

 

Meanwhile please confirm the 2^nd query tooltip placement. Your requirement related to place the tooltip while touching out of the doughnut circle or place the tooltip outside while touching inside the doughnut circle.  

 

Thanks, 

Muneesh Kumar G 

[Benjamin]

Hi Muneesh,

Thanks for replying. I mean the tooltip to show outside of the chart but to point to a location near the cursor

[Benjamin]

Hi Benjamin,  

 

Greetings from Syncfusion, currently we are validating your requirements. We will update you the status of this on September 3rd, 2019. We appreciate your patience until then.  

 

Meanwhile please confirm the 2^nd query tooltip placement. Your requirement related to place the tooltip while touching out of the doughnut circle or place the tooltip outside while touching inside the doughnut circle.  

 

Thanks, 

Muneesh Kumar G 

hi, is there any updates on boxing up the chart legend?

[Muneesh Kumar G]

Hi Benjamin, 

 

Currently we are checking the possibilities to achieve your all requirements. We will update you the status on September 4th, 2019.  

  

Thanks,  

Muneesh Kumar G  

 

[Saravanan Madheswaran]

Hi Benjamin, 

 

Query: in the tooltip, format the value as the percentage of the overall value. 

 

By using tooltip template and IValueConverter we can achieve your requirement. We have prepared sample based on your requirement and it will be download from below link.  

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SimpleSample-1572095569.zip  

 

Code snippet: 

<chart:DoughnutSeries x:Name="series" EnableTooltip="True" . . .> 

                        <chart:DoughnutSeries.TooltipTemplate> 

                            <DataTemplate > 

                                <StackLayout Orientation="Vertical"  VerticalOptions="FillAndExpand" Spacing="0" Padding="3" Margin="0"> 

                                    <Label Text="{Binding Value}" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand" TextColor="Black" FontAttributes="Bold" FontFamily="Helvetica" FontSize="12" /> 

                                    <Label Text="{Binding Value, Converter={StaticResource LabelConverter}, ConverterParameter={x:Reference series}}" VerticalTextAlignment="Center" HorizontalOptions="EndAndExpand" TextColor="Black" FontAttributes="None" FontFamily="Helvetica" Margin="0" FontSize="10" /> 

                                </StackLayout> 

                            </DataTemplate> 

                        </chart:DoughnutSeries.TooltipTemplate>                </chart:DoughnutSeries> 

  

[C#] 

    public class LabelConverter : IValueConverter 

    { 

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 

        { 

           if(value != null) 

            { 

                if(parameter !=null) 

                { 

                    var data = (double)value; 

                    var series = parameter as DoughnutSeries; 

                    if(series != null) 

                    { 

                        var datasource = series.BindingContext as DoughnutSeriesViewModel; 

                        var percentage = (data / datasource.Total) * 100; 

                        return "(" + percentage + " %" + ")"; 

                    } 

                } 

            } 

            return value; 

        } 

 

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 

        { 

            return value; 

        } 

    } 

 

 

To know more about tooltip template please refer the below link. 

 

https://help.syncfusion.com/xamarin/sfchart/tooltip#tooltip-template  

 

 

 

 

Regards, 

Saravanan. 

[Benjamin]

Hi. With regards to my query on boxing up legend. i was trying to do it with Legend item template following this guide. 

But it seems that i have an error: The attachable property 'ItemTemplate' was not found in type 'ChartLegend'.

my markup

[Muneesh Kumar G]

Hi Benjamin, 

  

We have validated your code snippet and we found that you have missed to initialize ChartLegend instance before the ItemTemplate population. Please refer the below code snippet. 

  

  

<chart:SfChart.Legend> 

                    <chart:ChartLegend DockPosition="Bottom" OverflowMode="Wrap"> 

                        <chart:ChartLegend.ItemTemplate> 

                            <DataTemplate> 

                              <StackLayout Orientation="Horizontal" WidthRequest="143"> 

                                  <BoxView Color="{Binding IconColor}" HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="13" WidthRequest="13" /> 

                                  <Label FontSize="13" VerticalTextAlignment="Center" Text="{Binding DataPoint.Name}"/> 

                                  <Label HorizontalTextAlignment="End" VerticalTextAlignment="Center" HorizontalOptions="EndAndExpand" FontSize="13" Text="{Binding DataPoint.Value}"/> 

                              </StackLayout> 

                           </DataTemplate>     

                      </chart:ChartLegend.ItemTemplate> 

                 </chart:ChartLegend> 

</chart:SfChart.Legend> 

  

  

Please let us know if you have any other queries.  

 

Thanks,   

Muneesh Kumar G   

 

[Benjamin]

Hi. thanks for assistance.. but it seems that DataTemplate can't fit my requirement.

Would like to know if there is any update on my query to box up the legend?

the legend should look like this

[Muneesh Kumar G]

Hi Benjamin, 

 

Currently we do not have support to achieve your requirement “Support for customizing the ChartLegend background “ but we have logged a feature request on this and it can be tracked through our feedback portal below. 

  

Link : https://www.syncfusion.com/feedback/8718/support-for-customizing-the-chartlegend-background 

  

Please cast your vote to make it count. We will prioritize the features every release based on the demands. 

  

If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal. 

 

Thanks, 

Muneesh Kumar G 

 

[Benjamin]

Hi.

With regards to my requirement to show tooltip outside of the doughnut chart? is it possible?

Current view

expected view

As you can see from the current view, can't difference is the tooltip belong to the darker shade portion or lighter shade portion of the chart.

[Hemalatha Marikumar]

Hi Benjamin,

We have analyzed your requirement and would like to let you know that you have used template to show the tooltip. By default, tooltip appears at the center of the particular segment. But if there is no enough space to show the tooltip means, it will automatically place near the segment where it has space to render the view completely. So please ensure whether you have enough space to render the custom view. 

Please get back to us for further assistance.

Regards, 

Hemalatha M. 

[Benjamin]

Hi. 

Thanks for your reply and suggestions. 

i am able to achieved what i wanted by removing the chart padding.

[Muneesh Kumar G]

Hi Benjamin, 

 

Glad that the issue has been achieved and please get back to us if you need any other assistance.  

 

Thanks, 

Muneesh Kumar G.