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. Image for the cookie policy date
close icon

Customizing Donut Series

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


13 Replies

MK Muneesh Kumar G Syncfusion Team 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 



BE Benjamin 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


BE Benjamin replied to Muneesh Kumar G 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?


MK Muneesh Kumar G Syncfusion Team 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  
 



SM Saravanan Madheswaran Syncfusion Team 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. 



BE Benjamin 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



MK Muneesh Kumar G Syncfusion Team 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   
 



BE Benjamin 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


MK Muneesh Kumar G Syncfusion Team 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 
 



BE Benjamin 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.


HM Hemalatha Marikumar Syncfusion Team 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. 



BE Benjamin 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.


MK Muneesh Kumar G Syncfusion Team 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. 


Loader.
Live Chat Icon For mobile
Up arrow icon