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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to bind the Xamarin.Forms pie chart tooltip to “Others” category values

Platform: Xamarin.Forms |
Control: SfChart |
Published Date: August 11, 2020 |
Last Revised Date: August 11, 2020

We always like to group smaller pie chart values into the category "Others" to increase chart readability. But we also think about ways to show those grouped values in UI.

 

This article explains how to show grouped values of Xamarin.Forms Pie Chart using tooltip by these following ways, you can display the average of clustered values, either can display the individual value present in it.

 

How to show the sum of values that grouped at Xamarin Pie Chart

The below code example shows how to calculate and display the average of grouped value using the tooltip template.

 

Tooltip template to show average of grouped values.

 

Step 1: Declaration IValueConverter to calculate average values.

public class ChartAvgValueConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value != null)
        {
            //Return string value.
            if (parameter != null && parameter.ToString() == "Label")
            {
                return value is List<object> ? "Others" : (value as DataModel).XData;
            }
            else
            {
                //Return average value.
                if (value is List<object>)
                {
                    var collection = value as List<object>;
                    var sum = collection.Sum(item => (item as DataModel).YData);
                    return sum / collection.Count;
                }
                else
                {
                    return (value as DataModel).YData;
                }
            }
        }
     
        return null;
    }
 
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value;
    }
}

 

Step 2: DataTemplate declarations.

<ContentView.Resources>
    <local:ChartAvgValueConverter x:Key="sumOfValuesConverter"/>
    <DataTemplate x:Key="TooltipTemplate">
        <StackLayout Orientation="Horizontal">
            <Label Text="{Binding Converter={StaticResource sumOfValuesConverter}, ConverterParameter='Label'}". . />
            <Label Text="{Binding Converter={StaticResource sumOfValuesConverter}}" ../>
        </StackLayout>
    </DataTemplate>
</ContentView.Resources>

 

Step 3: DataTemplate defined in the Series Tooltip Template.

 <chart:SfChart BackgroundColor="Transparent">
. . .
    <chart:SfChart.Series>
        <chart:PieSeries 
            ItemsSource="{Binding MonthlyExpenses}" 
            XBindingPath="XData" 
            YBindingPath="YData" 
            EnableTooltip="true"
            GroupMode="Value"
            GroupTo="50"
            TooltipTemplate="{StaticResource TooltipTemplate}"
            >
            
        </chart:PieSeries>
    </chart:SfChart.Series>
    <chart:SfChart.ChartBehaviors>
        <chart:ChartTooltipBehavior BackgroundColor="LightBlue
    </chart:SfChart.ChartBehaviors>
</chart:SfChart>

 

How to bind the Xamarin.Forms Pie Chart grouped data collection to the Tooltip

The below code example shows how to display the values, which present inside the group ‘Others’.

 

Tooltip template shows individual value present in the others category.

 

Step 1: Declaration IValueConverter to generate BindableLayout ItemsSource

public class ChartValueConverter : IValueConverter
{
//Which returns ItemsSource for bindable layout.
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
 
        if(value != null)
        {
            IList<DataModel> dataList = new List<DataModel>();
            if (value is DataModel)
            {
                dataList.Add(value as DataModel);
                return dataList;
            }
            else
            {
                return value;
            }
        }
 
        return value;
    }
 
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value;
    }
}

 

Step 2: DataTemplate declarations with any of the BindableLayout.

<ContentView.Resources>
    <local:ChartValueConverter x:Key="itemsSourceConverter"/>
    <DataTemplate x:Key="TooltipTemplate">
        <StackLayout BindableLayout.ItemsSource="{Binding Converter={StaticResource itemsSourceConverter}}" >
            <BindableLayout.ItemTemplate>
                <DataTemplate>
                    <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
                        <Label Text="{Binding XData}" HorizontalTextAlignment="Center"/>
                        <Label Text="{Binding YData}" HorizontalTextAlignment="Center"/>
                    </StackLayout>
                </DataTemplate>
            </BindableLayout.ItemTemplate>
        </StackLayout>
    </DataTemplate>
</ContentView.Resources>

 

Step 3: DataTemplate defined in the Series Tooltip Template.

<chart:SfChart BackgroundColor="Transparent">
. . .
    <chart:SfChart.Series>
        <chart:PieSeries . . .
            EnableTooltip="true"
            GroupMode="Value"
            GroupTo="50"
            TooltipTemplate="{StaticResource TooltipTemplate}"
            >
. . .
        </chart:PieSeries>
    </chart:SfChart.Series>
    <chart:SfChart.ChartBehaviors>
        <chart:ChartTooltipBehavior BackgroundColor="LightBlue
    </chart:SfChart.ChartBehaviors>
</chart:SfChart>

 

View the sample in GitHub.

 

Related links

 

Group small data points into “others”

Bindable Layouts in Xamarin.Forms

See also

How to set size of pie/doughnut?

How to explode the pie series slice on touch?

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

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

Up arrow icon

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