How do I set the ToolTip binding for a circular chart in C#

[Mark Hodgkinson]

I am trying to create a sfCircularChart solely through C# code for my .Net MAUI mobile app (there are various reasons why I must do this)

I cannot get the ToolTip to display!

My code to create the DataTemplate for the tooltip is as follows:

                                var dataTemplate = new DataTemplate(() =>

                                {

                                    // Create a Label

                                    var label = new Label();

                                    // Set up the binding for the Label's Text property

                                    label.SetBinding(Label.TextProperty, "ToolTip");

                                    label.TextColor = Colors.White;

                                    label.FontAttributes = FontAttributes.Bold;

                                    label.FontSize = 12;

                                    label.HorizontalOptions = LayoutOptions.Center;

                                    label.VerticalOptions = LayoutOptions.Center;

                                    // Return the label as the content of the template

                                    return label;

                                });

                                series.TooltipTemplate = dataTemplate;

My ViewModel for the chart is:

    public class Model(string name, double count, ListHeader category, string tooltip)

    {

        public string Category { get; set; } = name;

        public double Total { get; set; } = count;

        public string ToolTip { get; set; } = tooltip;

        public ListHeader CategoryTag { get; set; } = category;

    }

    public class ViewModel

    {

        public ObservableCollection<Model> Data { get; set; }

        public ViewModel()

        {

            Data = [];

        }

    }

I am setting the chart.BindingContext to an instance of the ViewModel with all my data in it.  The chart appears correctly and has the correct data in it, but the tooltip is empty.

What am I doing wrong please?

[Arul Jenith Berkmans]

Hi Mark,

Thank you for your query. To access the corresponding business model in the tooltip template of a .NET MAUI Circular Chart, it's important to note that the binding context for the TooltipTemplate is the TooltipInfo class. This class contains the Item property, which gives you access to the data associated with the tooltip.

Also, please ensure that EnableTooltip is set to true in your series setup.

Here’s how you can configure the tooltip template:

<chart:SfCircularChart>

    <chart:SfCircularChart.Resources>

        <DataTemplate x:Key="tooltipTemplate">

            <StackLayout Orientation="Horizontal">

<Label Text="{Binding Item.Product}"

       TextColor="Black"

       FontAttributes="Bold"/>

<Label Text=" : "

       TextColor="Black"

       FontAttributes="Bold""/>

                 <Label Text="{Binding Item.SalesRate}"

             TextColor="Black"/>

            </StackLayout>

        </DataTemplate>

    </chart:SfCircularChart.Resources>

 

    <chart:PieSeries EnableTooltip="True"

     ItemsSource="{Binding Data}"

     XBindingPath="Product"

     YBindingPath="SalesRate"

     TooltipTemplate="{StaticResource tooltipTemplate}"/>

</chart:SfCircularChart>

For more details, you can refer to the user guide documentation.

If you need any further assistance or concerns, feel free to ask.

Regards,

ARUL JENITH B.