Category / Section
How ToolTip setup display X and Y value in Windows Phone Charts?
2 mins read
Description:
By default, series ToolTip displays only the Y values. This article describes the way to change this default setup for ToolTip and make it display both X and Y values.
Solution:
The ToolTip in the SfChart can be customized by using the TooltipTemplate property. The custom template can be defined in the DataTemplate property. This template gets the ChartSegment in the template context and you can get X and Y values or even the complete datapoint object from this segment instance.
Note: A converter is used to get the X and Y values from the ChartSegment.
XAML
<Window.Resources>
<local:Converter x:Key="conver"/>
<DataTemplate x:Key="toolTip1">
<TextBlock Text= "{Binding Converter={StaticResource conver}}" FontWeight="Thin" FontStretch="Expanded" FontFamily="Segoe UI" Background="DarkBlue" Foreground="White" FontSize="19"/>
</DataTemplate>
</Window.Resources>
<syncfusion:ColumnSeries x:Name="sampleSeries" Label="Gold"
Interior="Gold"
ItemsSource="{Binding Computers}"
XBindingPath="Computer"
YBindingPath="Gold"
<!--Tooltip is enabled and TooltipTemplate template is assigned with DataTemplate-->
ShowTooltip="True"
TooltipTemplate="{StaticResource toolTip1}"
C#
//Tooltip is enabled and the TooltipTemplate template is assigned with DataTemplate. sampleChart.Series[0].ShowTooltip = true; sampleChart.Series[0].TooltipTemplate = Resources["toolTip1"] as DataTemplate;
C#
public class Converter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
return string.Format("{0}, {1}", ((value as ChartSegment).Item as Model).Country,
((value as ChartSegment).Item as Model).Gold);
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
The following screenshot illustrates the output for the Chart with the ToolTip showing the X and Y values of the segments.das:
