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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to make the tooltip to display x and y values together or any other value from the underlying model?

Platform: UWP |
Control: SfChart |
Published Date: January 27, 2016 |
Last Revised Date: June 27, 2019

Description:

This article describes how to customize the tooltip by overriding its default template and the how to display any other value from the items source.

Solution:

The tooltip in the SfChart can be customized by using the TooltipTemplate property of the DataTemplate. You need to use a converter to get the underlying values from the ChartSegment that comes as DataContext for this data template.

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 enabled and TooltipTemplate template is assigned with DataTemplate-->
                         ShowTooltip="True"
                         TooltipTemplate="{StaticResource toolTip1}"
                                         />

C#

//ToolTip enabled and TooltipTemplate template is assigned with DataTemplate.
sampleChart.Series[0].ShowTooltip = true;
sampleChart.Series[0].TooltipTemplate = Resources["toolTip1"] as DataTemplate;
 

 

    public class Converter : IValueConverter
    {
public object Convert(object value, Type targetType, object parameter,    System.Globalization.CultureInfo culture)
        {      
         return string.Format("{0}, {1}", ((value as ChartSegment).Item as Model).Country, 
                             ((value as ChartSegment).Item as Model).Gold );
         //Here ‘Item’ retrieves the corresponding data point model instance to get the required values.
        }
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

The following screenshot illustrates the output with the tooltip that shows the x and y values of the segments.

Output

Chart tooltip displaying the X and Y values of the underlaying model of the current data point in WPF

2X faster development

The ultimate UWP UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon