xmlns:ig="clr-namespace:Infragistics.XamarinForms.Controls.Charts;assembly=Infragistics.XF.Charts"
xmlns:local="clr-namespace:MyAppNamespace"
This topic explains, with code examples, how to configure the tooltips in the XamCategoryChart control.
In the XamCategoryChart, tooltips are displayed when the tap and hold gesture is performed within the chart’s plot area. Also, tapping and holding and then moving the finger over other parts of the plot area without releasing will update tooltip values.
The following topics are prerequisites to understanding this topic:
This topic contains the following sections:
The tooltip content is provided through the ToolTipTemplate property of the XamCategoryChart object. In Xamarin.Forms this is done using a DataTemplate, which contains the visual elements that make up the tooltip.
The tooltip in the XamCategoryChart will represent each of the series plotted in the chart. As such, unless you are using a hierarchical structure where your value property names are the same, a DataTemplateSelector may be a wise choice to use with the ToolTipTemplate property.
The elements placed in the DataTemplate used for the ToolTipTemplate will have a binding context of a DataContext object. This object can access the underlying data item for that particular tooltip via its Item property and the Series that it is representing via its Series property. The usage of this DataContext class and the DataTemplateSelector are shown in the code snippet below.
You can further customize the look and feel of the XamCategoryChart control’s tooltips by setting the following properties in addition to the ToolTipTemplate property:
The following code example shows how to customize the tooltips in the XamCategoryChart control using the properties above, along with a DataTemplateSelector:
In XAML
xmlns:ig="clr-namespace:Infragistics.XamarinForms.Controls.Charts;assembly=Infragistics.XF.Charts"
xmlns:local="clr-namespace:MyAppNamespace"In XAML
<ig:XamCategoryChart ItemsSource="{Binding}"
ChartType="Column"
ToolTipBackgroundColor="LightGray"
ToolTipBorderColor="DarkOrange"
ToolTipBorderThickness="2">
<ig:XamCategoryChart.ToolTipTemplate>
<local:TooltipSelector/>
</ig:XamCategoryChart.ToolTipTemplate>
</ig:XamCategoryChart>In C#
namespace MyAppNamespace
{
public class TooltipSelector : DataTemplateSelector
{
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
if (container is ColumnSeries)
{
ColumnSeries series = container as ColumnSeries;
DataTemplate template = CreateDataTemplate(series);
return template;
}
else
{
return null;
}
}
private DataTemplate CreateDataTemplate(ColumnSeries series)
{
DataTemplate template = new DataTemplate(() =>
{
StackLayout layout = new StackLayout() { Orientation = StackOrientation.Horizontal, Margin = new Thickness(5, 2) };
Label titleLabel = new Label() { TextColor = ((SolidColorBrush)series.ActualBrush).Color };
titleLabel.Text = series.ValueMemberPath + ": ";
Label valueLabel = new Label() { TextColor = ((SolidColorBrush)series.ActualBrush).Color };
valueLabel.SetBinding(Label.TextProperty, new Binding("Item." + series.ValueMemberPath));
layout.Children.Add(titleLabel);
layout.Children.Add(valueLabel);
return layout;
});
return template;
}
}
}