Tooltip customization

[Varun]

Hi

I need to customize the tooltip to remove all the background colors and add my own template to the same.

Currently unable to increase the pointer or arrow on the tooltip. Also background is not editable.

Can you please provide some solution to get the tooltip in more detail customized form.

Regards

Varun

[Divya Venkatesan]

Hi Varun, 

 

Thanks for contacting Syncfusion support. 

 

Query 1: I need to customize the tooltip to remove all the background colors 

You can remove the background color of tooltip by setting Transparent background color as show in the code snippets. 

 

Code snippet [Xaml]: 

<chart:SfChart.ChartBehaviors> 

    <chart:ChartTooltipBehavior BackgroundColor="Transparent"/> 

</chart:SfChart.ChartBehaviors> 

 

Code snippet [C#]: 

ChartTooltipBehavior tooltip = new ChartTooltipBehavior(); 

tooltip.BackgroundColor = Color.Transparent; 

chart.ChartBehaviors.Add(tooltip); 

 

You can refer the following user guide link to know more about tooltip. 

https://help.syncfusion.com/xamarin/sfchart/tooltip  

 

Query 2: and add my own template to the same. 

You can use the TooltipTemplate property of series to define your own template for tooltip. Please refer the below code snippets. 

 

Code snippet [Xaml]: 

<chart:ColumnSeries.TooltipTemplate> 

    <DataTemplate> 

        <StackLayout Orientation="Horizontal"> 

            <Label Text="{Binding Category,StringFormat='{0}: '}" /> 

            <Label Text="{Binding Value}" /> 

        </StackLayout> 

    </DataTemplate> 

</chart:ColumnSeries.TooltipTemplate> 

 

Code snippet [C#]: 

series.TooltipTemplate = new DataTemplate(() => 

{ 

    StackLayout layout = new StackLayout(); 

    layout.Orientation = StackOrientation.Horizontal; 

 

    Label xValue = new Label(); 

    xValue.SetBinding(Label.TextProperty, new Binding("Category", stringFormat:"{0}: ")); 

 

    Label yValue = new Label(); 

    yValue.SetBinding(Label.TextProperty, "Value"); 

 

    layout.Children.Add(xValue); 

    layout.Children.Add(yValue); 

    return layout; 

}); 

 

You can refer the following user guide link to know more about tooltip template. 

https://help.syncfusion.com/xamarin/sfchart/tooltip#tooltip-template  

 

Query 3: Currently unable to increase the pointer or arrow on the tooltip. Also background is not editable. 

We have achieved your requirement using CustomRenderer and defining PointerLength property in class extened from SfChart.  

 

We have prepared a sample for these which can be downloaded from the following link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/137097/ze/TooltipSample-58350797  

 

Please let us know if you need any further assistance. 

 

Regards, 

Divya Venkatesan