We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Customizing Donut Series

Thread ID:

Created:

Updated:

Platform:

Replies:

147045 Aug 30,2019 03:38 AM UTC Sep 10,2019 06:10 AM UTC Xamarin.Forms 13
loading
Tags: SfChart
Benjamin
Asked On August 30, 2019 04:08 AM UTC

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 [Syncfusion]
Replied On August 30, 2019 12:31 PM UTC

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 2nd 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
Replied On August 30, 2019 02:02 PM UTC

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
Replied On September 3, 2019 04:06 AM UTC

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 2nd 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 [Syncfusion]
Replied On September 3, 2019 02:06 PM UTC

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 [Syncfusion]
Replied On September 5, 2019 12:48 AM UTC

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.  
 
 
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. 
 
 
 
 
 
Regards, 
Saravanan. 


Benjamin
Replied On September 5, 2019 09:49 AM UTC

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
markup


Muneesh Kumar G [Syncfusion]
Replied On September 5, 2019 10:55 AM UTC

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
Replied On September 6, 2019 03:21 AM UTC

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
legend

Muneesh Kumar G [Syncfusion]
Replied On September 6, 2019 10:54 AM UTC

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. 
  
  
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
Replied On September 9, 2019 02:52 AM UTC

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 [Syncfusion]
Replied On September 9, 2019 01:06 PM UTC

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
Replied On September 10, 2019 03:06 AM UTC

Hi. 

Thanks for your reply and suggestions. 

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

Muneesh Kumar G [Syncfusion]
Replied On September 10, 2019 06:10 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon