How to show tooltip on load time in Xamarin.Forms Charts?
This KB article explains how to show the tooltip programmatically for the first segment in load time in Xamarin Charts and move the tooltip based on touch move instead of touch down.
You can show the tooltip in load time with the help of the SeriesRendered event and Show method of ChartTooltipBehavior as shown inper the following code sample.
XAML
<chart:SfChart SeriesRendered="Chart_SeriesRendered" VerticalOptions="FillAndExpand" >
……
<chart:SfChart.Series>
<chart:ColumnSeries EnableTooltip="True" ItemsSource="{Binding ColumnData}" XBindingPath="XValue" YBindingPath="YValue"/>
</chart:SfChart.Series>
<chart:SfChart.ChartBehaviors>
<local:ChartTooltipBehaviorExt x:Name="tooltip"/>
</chart:SfChart.ChartBehaviors>
…….
</chart:SfChart>
You can show the tooltip by using the following two solutions either pixel position or axis values.
Solution 1: Using pixel values.
You can show the tooltip by directly passing the pixel position to the Show method.
C#
private void Chart_SeriesRendered(object sender, EventArgs e)
{
Device.BeginInvokeOnMainThread(() =>
{
tooltip.Show(406, 544, true);
});
}
Solution 2: Using data point.
You can show the tooltip by converting the data point value to the pixel values by using the ValueToPoint method and passing that converted pixel value to the Show method.
C#
private void Chart_SeriesRendered(object sender, EventArgs e)
{
SfChart chart = sender as SfChart;
Device.BeginInvokeOnMainThread(() =>
{
float xPoint = (float)chart.ValueToPoint(chart.PrimaryAxis, 2016);
float yPoint = (float)chart.ValueToPoint(chart.SecondaryAxis, 55);
tooltip.Show(xPoint, yPoint, true);
});
}
The Show method is available for Android and iOS platforms only. It will not work for the UWP platform.
Output:
How to show the Tooltip in touch move instead of touch down?
You can show the tooltip in touch move by extending the ChartTooltipBehavior and calling the Show method inside the OnTouchUp and OnTouchMove methods as shown in the following code sample.
ChartTooltipBehaviorExt
public class ChartTooltipBehaviorExt : ChartTooltipBehavior
{
protected override void OnTouchUp(float x, float y)
{
base.OnTouchUp(x,y);
EnableTooltip(x, y);
}
protected override void OnTouchMove(float x, float y)
{
base.OnTouchMove(x,y);
EnableTooltip(x, y);
}
void EnableTooltip(float x, float y)
{
Show(x, y, false);
Device.StartTimer(TimeSpan.FromSeconds(this.Duration), () =>
{
Hide(false);
return false;
});
}
}
See also:
How to customize the appearance of Xamarin.Forms chart
How to enable the zooming in Xamarin.Forms chart
How to enable the data point selection
Conclusion
I hope you enjoyed learning about how to show tooltip on load time in Xamarin.Forms Charts.
You can refer to our Xamarin Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin Chart Documentation to understand how to present and manipulate data.
For current customers, you can check out our Xamarin components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Xamarin Chart and other Xamarin components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac or feedback portal. We are always happy to assist you!
