Tooltip customization

[Alex]

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?

[Alex]

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]

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

Regards,
Manivannan E.

[Alex]

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)

{

base.OnElementChanged(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;

break;

}

}

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

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

　

return string.Empty;

}

}

How can I do it for iOS?

[Manivannan Elangovan]

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.

Regards,
Manivannan E.

[Alex]

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]

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.

 

Thanks,

Karthikeyan V.

[Alex]

Exactly what I need!

Thanks a lot for your support

[Manivannan Elangovan]

Hi Alexandre,

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

Regards,
Manivannan E.