Tooltip

SfChart provides tooltip support for all series. It is used to show information about the segment, when you tap on the segment. To enable the tooltip, you need to set EnableTooltip property as true.

<chart:SfChart.Series>

	<chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Month" YBindingPath="Value" EnableTooltip="True"/>

</chart:SfChart.Series>
ColumnSeries column = new ColumnSeries ();

column.XBindingPath = "Month";

column.YBindingPath = "Value";

column.ItemsSource = Data;

column.EnableTooltip = true;

chart.Series.Add(column);

Tooltip support in Xamarin.Forms Chart

Customizing appearance

You can customize the tooltip label. For customizing, you need to add an instance of ChartTooltipBehavior to the ChartBehaviors collection property of SfChart. Following properties are used to customize the tooltip label which are available in ChartTooltipBehavior.

  • BorderColor – used to change the label border color
  • BorderWidth – used to change the label border width
  • BackgroundColor – used to change the label background color
  • Margin – used to change label border thickness
  • TextColor – used to change the text color
  • Font – used to change the label font size, family, and weight. (This is deprecated API. Use FontSize, FontFamily, and FontAttributes properties instead of this.)
  • FontFamily- used to change the font family for the tooltip text.
  • FontAttributes - used to change the font style for the tooltip text.
  • FontSize - used to change the font size for the tooltip text.
  • LabelFormat – used to format the label
  • Duration – used to set the visible duration of label
  • OffsetX – used to move the label horizontally
  • OffsetY – used to move the label vertically
<chart:SfChart.ChartBehaviors>

	<chart:ChartTooltipBehavior BackgroundColor="Blue" BorderWidth="3" BorderColor="Aqua" TextColor="White" Margin="5" Duration="10" Font="Times New Roman, 15"/>

	</chart:ChartTooltipBehavior>

</chart:SfChart.ChartBehaviors>
SfChart chart = new SfChart();
...

ChartTooltipBehavior tool = new ChartTooltipBehavior();
tool.BackgroundColor = Color.Blue;
tool.BorderWidth = 3;
tool.BorderColor = Color.Aqua;
tool.TextColor = Color.White;
tool.Margin = new Thickness(5, 5, 5, 5);
tool.Duration = 10;
tool.Font = Font.OfSize(Times New Roman,15);	
chart.ChartBehaviors.Add(tool);

Customizing the appearance of tooltip in Xamarin.Forms Chart

Tooltip Template

You can customize the appearance of the tooltip with your own template by using the TooltipTemplate property of Series. The BindingContext in the data template will be the respective underlying object from ItemsSource.

<chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Month" YBindingPath="Value" EnableTooltip="True">
                    <chart:ColumnSeries.TooltipTemplate>
                        <DataTemplate>
                            <StackLayout Orientation="Vertical">
                                <StackLayout Orientation="Horizontal">
                                    <Label Text="Month :" />
                                    <Label Text="{Binding Month}"/>
                                </StackLayout>
                                <StackLayout Orientation="Horizontal">
                                    <Label Text="Value   :" />
                                    <Label Text="{Binding Value}"/>
                                </StackLayout>
                            </StackLayout>
                        </DataTemplate>
                    </chart:ColumnSeries.TooltipTemplate>
</chart:ColumnSeries>
<chart:SfChart.ChartBehaviors>
   <chart:ChartTooltipBehavior BorderWidth="3" BorderColor="Maroon"/>
</chart:SfChart.ChartBehaviors>
ColumnSeries column = new ColumnSeries();
column.ItemsSource = viewModel.Data;
column.XBindingPath = "Month";
column.YBindingPath = "Value";
column.EnableTooltip = true;

ChartTooltipBehavior tooltip = new ChartTooltipBehavior();
tooltip.BorderColor = Color.Maroon;
tooltip.BorderWidth = 3 ;
chart.ChartBehaviors.Add(tooltip);

DataTemplate template = new DataTemplate(() =>
{
StackLayout stack = new StackLayout() { Orientation = StackOrientation.Vertical };
StackLayout first = new StackLayout() { Orientation = StackOrientation.Horizontal };
Label label = new Label() { Text = "Month:" };
Label xValue = new Label();
xValue.SetBinding(Label.TextProperty, new Binding("Month"));
first.Children.Add(label);
first.Children.Add(xValue);

StackLayout second = new StackLayout() { Orientation = StackOrientation.Horizontal };
Label label1 = new Label() { Text = "Value:" };
Label yValue = new Label();
yValue.SetBinding(Label.TextProperty, "Value");
second.Children.Add(label1);
second.Children.Add(yValue);

stack.Children.Add(first);
stack.Children.Add(second);
return stack;
});

column.TooltipTemplate = template;
chart.Series.Add(column);

Tooltip template support in Xamarin.Forms Chart

Methods

You can show or hide the chart tooltip programmatically by using the show or hide method.

Show method

The Show method is used to activate the tooltip at the specified location.

  • xaml
  • <Button Text="Show tooltip" Clicked="ShowTooltip" />
    
    . . .
    
    <chart:SfChart.ChartBehaviors>
        <chart:ChartTooltipBehavior x:Name="tooltipBehavior" />
    </chart:SfChart.ChartBehaviors>
  • c#
  • public partial class MainPage : ContentPage
    {    
        public MainPage()
        {
            InitializeComponent();
        }
    
        private void ShowTooltip(object sender, EventArgs e)
        {
            //pointX - determines the x position of tooltip, pointY - determines the y position of tooltip and bool value determines whether the tooltip should be animated while displaying.
            tooltipBehavior.Show(pointX, pointY, true);
        }
    }

    NOTE

    The tooltip will be activated at the specified location only if there is any data point under the specified location.

    Hide method

    The Hide method is used to hide the tooltip programmatically.

  • c#
  • //The argument determines whether the tooltip should be animated while hiding.
    
    tooltip.Hide(true);