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. Image for the cookie policy date
close icon

Tooltip customization

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?

8 Replies

AL Alex 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.

ME Manivannan Elangovan Syncfusion Team 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.

AL Alex 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?

ME Manivannan Elangovan Syncfusion Team 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.

AL Alex 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

KV Karthikeyan V Syncfusion Team 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.

AL Alex March 31, 2016 02:21 PM UTC

Exactly what I need!
Thanks a lot for your support

ME Manivannan Elangovan Syncfusion Team April 1, 2016 05:33 AM UTC

Hi Alexandre,

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

Manivannan E.

Live Chat Icon For mobile
Up arrow icon