How to Bind the .NET MAUI Circular Chart Tooltip to the Values?

In this article, we can learn how to show tooltips for the “Others” category in a .NET MAUI Circular Chart. We’ll use a custom tooltip template to display information when hovering over chart segments.

Step 1: Initializing the PieSeries

First, we set up the PieSeries in the Circular Chart with GroupTo support. The GroupTo property helps group smaller segments into a single “Others” category.

XAML

<chart:SfCircularChart>
   ....
   <chart:SfCircularChart.Series>
       <chart:PieSeries GroupTo="10"
                        ItemsSource="{Binding GroupToData}"
                        XBindingPath="Name" YBindingPath="Value">
       </chart:PieSeries>
   </chart:SfCircularChart.Series>
</chart:SfCircularChart> 

Step 2: Explaining the Default Tooltip with “Others”

We have data segments that fall below a certain threshold, they are grouped together into the “Others” category. The default tooltip view for this “Others” category provides users with a summarized insight into these grouped segments.

When data segments are too small (fall below the GroupTo value), they are grouped into an “Others” category. The default tooltip for this “Others” category gives a summary of these grouped segments.

Step 3: Define the Custom Tooltip Template

Next, we create a custom tooltip template called “tooltipTemplate”. This template uses a vertical stack layout to display data dynamically.

XAML

<ContentPage.Resources>
   <ResourceDictionary>
       <!-- Define converters -->
       <local:ItemsSourceConverter x:Key="valueConvert"/>
       <local:StringFormatConverter x:Key="StingConvert"/>

       <!-- Define tooltip template -->
       <DataTemplate x:Key="tooltipTemplate">
           <VerticalStackLayout BindableLayout.ItemsSource="{Binding Item, Converter={StaticResource valueConvert}}">
               <BindableLayout.ItemTemplate>
                   <DataTemplate>
                       <Grid ColumnDefinitions="*,Auto">
                           <Label Text="{Binding Name}" Grid.Column="0"/>
                           <Label Text="{Binding Converter={StaticResource StingConvert}, ConverterParameter={x:Reference pieSeries1}}" Grid.Column="2" />
                       </Grid>
                   </DataTemplate>
               </BindableLayout.ItemTemplate>
           </VerticalStackLayout>
       </DataTemplate>
   </ResourceDictionary>
</ContentPage.Resources>

Step 4: Implement Converters

We need two converters in C# for handling data and formatting the tooltip text.
The ItemsSourceConverter is designed to manipulate the data source bound to the chart’s tooltip. Its primary goal is to handle the grouping of smaller data segments into the “Others” category and prepare the data for display in the tooltip.

The StringFormatConverter is aimed at formatting the tooltip text based on the selected group mode of the pie series in the chart. It ensures that the tooltip displays data values in a user-friendly and understandable format.

C#

   public class ItemsSourceConverter : IValueConverter
   {
       public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
       {
           if (value != null)
           {
               var data = value as List<object>;
               if (data != null && data.Count > 5)
               {
                   var data_list = data.Where(x => data.IndexOf(x) < 6).ToList();

                   string name = "Others";
                   double yvalue = data.Where(x => data.IndexOf(x) >= 6).Sum(x => (x is ChartDataModel model) ? model.Value : 0);
                   double size = data.Where(x => data.IndexOf(x) >= 6).Sum(x => (x is ChartDataModel model) ? model.Size : 0);
                   data_list.Add(new ChartDataModel(name, yvalue, size));

                   return data_list;
               }
               else if (data != null)
                   return data;
               else
               {
                   return new List<object>() { value };
               }
           }

           return new List<object>();
       }

       public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
       {
           return value;
       }
   }

   public class StringFormatConverter : IValueConverter
   {
       public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
       {
           if (value != null && value is ChartDataModel model)
           {
               if (parameter is PieSeries series)
               {
                   switch (series.GroupMode)
                   {
                       case PieGroupMode.Percentage:
                           return string.Format("{0:P0}", model.Size);
                       default:
                           return string.Format("${0:F2} T", model.Value);
                   }
               }
           }

           return "";
       }

       public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
       {
           return value;
       }
   }

Step 5: Integrate Custom Tooltip with the Chart

Finally, we add the custom tooltip template to the Circular Chart by setting the TooltipTemplate property of the PieSeries.

XAML

<chart:PieSeries TooltipTemplate="{StaticResource tooltipTemplate}" 
                GroupTo="10" EnableTooltip="True"
                ItemsSource="{Binding GroupToData}" XBindingPath="Name" YBindingPath="Value">
</chart:PieSeries>

Output

For better understanding, refer this GitHub sample.

Conclusion:

By following the steps outlined in this article, you can seamlessly bind the .NET MAUI Circular Chart tooltip to the values of the “Others” category. This customization enhances the chart’s interactivity and provides users with valuable insights into their data.

You can refer to our .NET MAUI Circular Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our .NET MAUI Circular Chart documentation to understand how to present and manipulate data.
For current customers, you can check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.
If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!