We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Tooltip customization

Thread ID:





123456 Mar 18,2016 02:48 PM UTC Apr 1,2016 05:33 AM UTC Xamarin.Forms 8
Tags: SfChart
Asked On March 18, 2016 02:48 PM UTC

We just started to evaluate Syncfusion and specially the charts component for Xamarin.Forms.

For a use case we need to customize the tooltip label. By default it seems we can only display the YAxis value.
For example I would like to bind to another property of the model. (e.g "18.03.2016: 15.5")
With Syncfusion WPF it's possible to achieve this with a TooltipTemplate.

Is there any way to do that?

Replied On March 21, 2016 10:14 AM UTC

I partially solved it by implementing a custom renderer with TooltipCreated & LabelsGenerated (for trackball) events.

But I can only get X & Y values. So I cannot get any other properties of the model to display it in the tooltip.

Manivannan Elangovan [Syncfusion]
Replied On March 21, 2016 12:53 PM UTC

Hi Alexandre,

Thanks for contacting Syncfusion support.

We have prepared a sample for getting data from model to customize the tooltip content and it can be downloaded from the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/123456/ze/TooltipCustomize976660311

Manivannan E.

Replied On March 22, 2016 07:25 AM UTC

Thanks a lot. It's really helpful.
However it only works with 1 axis.
I was able to fix it for Android like that:

public class CSfChartRenderer : Syncfusion.SfChart.XForms.Droid.SfChartRenderer


private SfChart _nativeChart;

private Syncfusion.SfChart.XForms.SfChart _formsChart;

protected override void OnElementChanged(Xamarin.Forms.Platform.Android.ElementChangedEventArgs<Syncfusion.SfChart.XForms.SfChart> e)



_nativeChart = Control;

_formsChart = e.NewElement;

_nativeChart.TooltipCreated += sfChart_TooltipCreated;

_nativeChart.LabelsGenerated += sfChart_LabelsGenerated;


void sfChart_LabelsGenerated(object sender, Com.Syncfusion.Charts.SfChart.LabelsGeneratedEventArgs e)


IList<ChartPointInfo> infos = e.P1 as IList<ChartPointInfo>;

for (int i = 0; i < infos.Count; i++)


ChartPointInfo pointInfo = infos[i];

pointInfo.Label = SetTooltip(pointInfo.ChartDataPoint);



private void sfChart_TooltipCreated(object sender, SfChart.TooltipCreatedEventArgs e)


e.P1.Label = SetTooltip(e.P1.ChartDataPoint);


private string SetTooltip(ChartDataPoint chartDataPoint)


int index = -1;

System.Collections.IList data = null;

int count = _nativeChart.Series.Size();

for (int i = 0; i < count; i++)


index = ((ArrayList)((ChartSeries)_nativeChart.Series.Get(i)).DataSource).IndexOf(chartDataPoint);

if (index > -1)


data = _formsChart.Series[i].ItemsSource as System.Collections.IList;




if (index > -1 && data != null)

return (data[index] as ChartPointValue).ToolTip.ToString();


return string.Empty;



How can I do it for iOS?

Manivannan Elangovan [Syncfusion]
Replied On March 23, 2016 02:06 PM UTC

Hi Alexandre,

We are unable to comprehend your exact requirement. However, we have prepared a sample to customize the trackball label content, by getting data from model and it can be downloaded from the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/123456/ze/Trackball1584514824

If the provided sample does not meet your requirement, could you please provide more details or screenshot regarding your requirement, which would be helpful for us to serve you better.

Manivannan E.

Replied On March 23, 2016 03:03 PM UTC

Please try to add a second serie in your sample projects.

For tooltip label and trackball label you access the series collection with index = [0]
That doesn't work if you have more than 1 serie in the chart.

Your code in Android (Solved by the previous code I post by parsing the series)
int index = ((ArrayList)((ChartSeries)nativeChart.Series.Get(0)).DataSource).IndexOf(e.P1.ChartDataPoint);

In iOS (I don't know how to solve it)

IList data = Chart.Series [0].ItemsSource as IList;

Is it more clear?

Thanks fo your help

Karthikeyan V [Syncfusion]
Replied On March 24, 2016 10:36 AM UTC

Hi Alexandre,


We are able to achieve your requirement by using the following code snippet.


nint seriesIndex = chart.IndexOfSeries (tooltipView.Series);
IList data = Chart.Series [(int)seriesIndex].ItemsSource as IList;


Please let us know, if you have any queires.



Karthikeyan V.

Replied On March 31, 2016 02:21 PM UTC

Exactly what I need!
Thanks a lot for your support

Manivannan Elangovan [Syncfusion]
Replied On April 1, 2016 05:33 AM UTC

Hi Alexandre,

Thanks for the update. Please let us know if have any other queries.

Manivannan E.


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon