Tooltip in .NET MAUI Sunburst Chart

30 Oct 20245 minutes to read

Tooltip provides additional information about the segments in the sunburst chart. Tooltip is displayed by tapping the segment. By default, the tooltip displays the corresponding segment’s category and value.

Enable Tooltip

To define the tooltip in the chart, set the EnableTooltip property of SfSunburstChart to true. The default value of the EnableTooltip property is False.

XAML

<sunburst:SfSunburstChart EnableTooltip="True">
. . .
</sunburst:SfSunburstChart>

C#

SfSunburstChart sunburst = new SfSunburstChart();
. . .      
sunburst.EnableTooltip = true;
this.Content = sunburst;

Customization

The appearance of the tooltip can be customized using the following properties:

• Background of type Brush, indicates background color to the tooltip label.
• FontAttributes of type FontAttributes, indicates the font style of * the label.
• FontFamily of type string, indicates the font family for the label.
• FontSize of type float, indicates the font size.
• Duration of type int, indicates the duration for displaying the tooltip.
• Margin of type Thickness, indicates the label’s margin.
• TextColor of type Color, indicates the color of the displayed text.

XAML

<sunburst:SfSunburstChart EnableTooltip="True">
    . . .
    <sunburst:SfSunburstChart.TooltipSettings>
        <sunburst:SunburstTooltipSettings   
            Background="White"  TextColor="Black"  
            FontSize="14" FontAttributes="Bold" 
            Duration="5"/>
    </sunburst:SfSunburstChart.TooltipSettings>
    . . .
</sunburst:SfSunburstChart>

C#

SfSunburstChart sunburst = new SfSunburstChart();
. . .
sunburst.EnableTooltip = true;
SunburstTooltipSettings tooltipSettings = new SunburstTooltipSettings()
{
    TextColor = Colors.Black,
    Background = Brush.White,
    FontSize = 14,
    Duration = 5
};
sunburst.TooltipSettings = tooltipSettings;
. . .
this.Content = sunburst;

Custom Template

The sunburst chart provides support for customizing the appearance of the tooltip by using the TooltipTemplate property.

XAML

<sunburst:SfSunburstChart EnableTooltip="True" 
                          TooltipTemplate="{StaticResource template1}">
    . . .
    <sunburst:SfSunburstChart.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="template1">
                <StackLayout Orientation="Horizontal">
                    <Rectangle HeightRequest="30" WidthRequest="8" Fill="{Binding Fill}"/>
                    <StackLayout Orientation="Vertical">
                        <Label Text="{Binding Item[0]}" 
                               TextColor="White" FontFamily="Helvetica" 
                               FontSize="12.5" Padding="5,0,0,0"
                               FontAttributes="Bold"/>
                        <Label Text="{Binding Item[1],StringFormat='Count : {0}M'}" 
                               TextColor="White" FontFamily="Helvetica" 
                               FontSize="12" Padding="5,0,0,0" Margin="0,2,0,0"/>
                    </StackLayout>
                </StackLayout>
            </DataTemplate>
        </ResourceDictionary>
    </sunburst:SfSunburstChart.Resources>
    . . .

</sunburst:SfSunburstChart>

C#

SfSunburstChart sunburst = new SfSunburstChart();
. . .
sunburst.EnableTooltip = true;
sunburst.TooltipTemplate = (DataTemplate)sunburstChart.Resources["template1"];
. . .
this.Content = sunburst;