Tooltip

RadChartView provides a tooltip behavior which can be used to visualize arbitrary information related to a data point. The tooltip is enabled by adding ChartToolTipBehavior in the Behaviors collection of RadCartesianChart. To display it you can position the mouse cursor over a data point visual.

By default the tooltips of series are shown for their data points only. Each bar represents a datapoint for Bar series, but for Line, Spline and Area series the datapoints are the points that connect the line segments. You should specify the desired shape, color and size for these points to be visualized using DefaultVisualStyle or PointTemplate. Without it practically you won't see a point and respectively there won't be a tooltip for these series.

The user has control over the visualization of the tooltip information and the provided data context. This is done via the TooltipTemplate property which is exposed both by RadCartesianChart and the corresponding series. This allows you to define a custom template on a chart's level for all series and additionally to define different templates for each series. The TooltipTemplate property of the series has a higher priority than the TooltipTemplate of the chart, thus it will override it on a series level.

Defining Tooltip Behavior

The ChartToolTipBehavior should be added in the Behaviors collection of the chart.

Example 1: Defining a tooltip behavior

• XAML

<telerik:RadCartesianChart>          
    <telerik:RadCartesianChart.VerticalAxis> 
        <telerik:LinearAxis/> 
    </telerik:RadCartesianChart.VerticalAxis> 
    <telerik:RadCartesianChart.HorizontalAxis> 
        <telerik:LinearAxis/> 
    </telerik:RadCartesianChart.HorizontalAxis>             
 
    <telerik:RadCartesianChart.Behaviors> 
        <telerik:ChartTooltipBehavior/> 
    </telerik:RadCartesianChart.Behaviors>   
 
    <telerik:ScatterPointSeries PointSize="20,20"> 
        <telerik:ScatterPointSeries.DataPoints> 
            <telerik:ScatterDataPoint XValue="0.5" YValue="0.5"/> 
            <telerik:ScatterDataPoint XValue="1.0" YValue="1.5"/> 
            <telerik:ScatterDataPoint XValue="2.0" YValue="1.5"/> 
            <telerik:ScatterDataPoint XValue="2.0" YValue="3.0"/> 
            <telerik:ScatterDataPoint XValue="3.0" YValue="2.8"/> 
            <telerik:ScatterDataPoint XValue="3.5" YValue="3.5"/> 
        </telerik:ScatterPointSeries.DataPoints>     
    </telerik:ScatterPointSeries> 
</telerik:RadCartesianChart> 

At this point if you hover a data point visual a tooltip with basic information about the data point is displayed.

Figure 1: Default tooltip example

Customizing the Tooltip

To customize the apperance of the tooltip you can use the TooltipTemplate property. The property can be found both on the RadCartesianChart and the chart series classes.

Example 2: Setting TooltipTemplate of the series

• XAML

<telerik:ScatterPointSeries.TooltipTemplate> 
    <DataTemplate> 
        <Border Background="#5A000000" Padding="5" TextElement.Foreground="White"> 
            <StackPanel> 
                <StackPanel Orientation="Horizontal"> 
                    <TextBlock Text="X=" FontWeight="Bold" /> 
                    <TextBlock Text="{Binding XValue}"  /> 
                </StackPanel> 
                <StackPanel Orientation="Horizontal"> 
                    <TextBlock Text="Y=" FontWeight="Bold" /> 
                    <TextBlock Text="{Binding YValue}"  /> 
                </StackPanel> 
            </StackPanel> 
        </Border> 
    </DataTemplate> 
</telerik:ScatterPointSeries.TooltipTemplate> 

Figure 2: Custom tooltip example

The data context passed to the TooltipTemplate is an object of type DataPoint which can be CategoricalDataPoint, ScatterDataPoint, etc. This means that you may need to use different property paths for the bindings, based on the series type and its DataPoint implementation.

Example

This section demonstrates how to create a custom tooltip that displays the growth or shrinking profits of a fictitious company for each quarter over one year. Even though it will be a bar chart and the bars are more than enough to clearly visualize the relative profits, the example is simple and highlights the usage of RadChartView's tooltip API.

First we will need a chart, which is bound to a collection of custom objects (refer to Create Data-Bound Chart for more details on the binding). The objects in the data source will be used directly as values for the data points as well as content for out tooltips. We create several properties like Quarter, Profit, PreviousQuarter, PreviousDifference, NextQuarter and NextDifference properties for the purpose.

Example 3: Defining the Data Model

• C#
• VB.NET

public class ProfitDifferenceContext 
{ 
    public string Quarter 
    { 
        get; 
        set; 
    } 
    public double Profit 
    { 
        get; 
        set; 
    } 
    public object PreviousQuarter 
    { 
        get; 
        set; 
    } 
    public double PreviousDifference 
    { 
        get; 
        set; 
    } 
    public object NextQuarter 
    { 
        get; 
        set; 
    } 
    public double NextDifference 
    { 
        get; 
        set; 
    } 
} 

Public Class ProfitDifferenceContext 
    Dim _quarter As String 
    Dim _profit As Double 
    Dim _previousQuarter As Object 
    Dim _previousDifference As Double 
    Dim _nextQuarter As Object 
    Dim _nextDifference As Double    
 
    Public Property Quarter() As String 
        Get 
            Return Me._quarter 
        End Get 
        Set(value As String 
            Me._quarter = value 
        End Set 
    End Property 
 
    Public Property Profit() As Double 
        Get 
            Return Me._profit 
        End Get 
        Set(value As Double) 
            Me._profit = value 
        End Set 
    End Property 
 
  Public Property PreviousQuarter() As Object 
        Get 
            Return Me._previousQuarter 
        End Get 
        Set(value As Object) 
            Me._previousQuarter = value 
        End Set 
    End Property 
 
    Public Property Profit() As Double 
        Get 
            Return Me._previousDifference  
        End Get 
        Set(value As Double) 
            Me._previousDifference = value 
        End Set 
    End Property 
 
  Public Property NextQuarter() As Object 
        Get 
            Return Me._nextQuarter  
        End Get 
        Set(value As Object) 
            Me._nextQuarter = value 
        End Set 
    End Property 
 
    Public Property NextDifference() As Double 
        Get 
            Return Me._nextDifference  
        End Get 
        Set(value As Double) 
            Me._nextDifference = value 
        End Set 
    End Property     
End Class 

We should set data to the values so that it will be able to display information about the currently hovered data point via the TooltipTemplate.

Example 4: Populating and setting the data

• C#

public MainPage() 
{ 
    InitializeComponent(); 
    List<ProfitDifferenceContext> items = CreateItems(); 
    this.chart.Series[0].ItemsSource = items; 
} 
 
private List<ProfitDifferenceContext> CreateItems() 
{ 
    List<ProfitDifferenceContext> items = new List<ProfitDifferenceContext>(); 
    Random r = new Random(); 
    const int itemsCount = 4; 
    for (int i = 0; i < itemsCount; i++) 
    { 
        ProfitDifferenceContext profitDiffContext = new ProfitDifferenceContext() 
        { 
            Quarter = string.Format("Q{0}", i + 1), 
            Profit = r.Next(1, 20), 
        }; 
        items.Add(profitDiffContext); 
    } 
    for (int i = 0; i < itemsCount; i++) 
    { 
        ProfitDifferenceContext profitDiffContext = items[i]; 
        if (i > 0) 
        { 
            ProfitDifferenceContext prevPoint = items[i - 1]; 
            profitDiffContext.PreviousDifference = profitDiffContext.Profit - prevPoint.Profit; 
            profitDiffContext.PreviousQuarter = prevPoint.Quarter; 
        } 
        if (i < itemsCount - 1) 
        { 
            ProfitDifferenceContext nextPoint = items[i + 1]; 
            profitDiffContext.NextDifference = nextPoint.Profit - nextPoint.Profit; 
            profitDiffContext.NextQuarter = nextPoint.Quarter; 
        } 
    } 
    return items; 
} 

Example 5: Defining the view

• XAML

<telerik:RadCartesianChart x:Name="chart">   
    <telerik:RadCartesianChart.HorizontalAxis> 
        <telerik:CategoricalAxis/> 
    </telerik:RadCartesianChart.HorizontalAxis> 
    <telerik:RadCartesianChart.VerticalAxis> 
        <telerik:LinearAxis/> 
    </telerik:RadCartesianChart.VerticalAxis> 
    <telerik:BarSeries CategoryBinding="Quarter" ValueBinding="Profit"/> 
</telerik:RadCartesianChart> 

Now we need to define our tooltip behavior and set its tool tip template. It will display the value of the selected data point and also how this value relates to the previous and next quarters.

Example 6: Defining the tooltip behavior and the tooltip template

• XAML

<telerik:RadCartesianChart.Behaviors> 
    <telerik:ChartTooltipBehavior Placement="Top" VerticalOffset="20" /> 
</telerik:RadCartesianChart.Behaviors> 
<telerik:RadCartesianChart.TooltipTemplate> 
    <DataTemplate> 
        <Grid> 
            <Path Data="M-1236,-441 L-1180,-441 -1180,-424 -1228,-424 -1230.5,-420 -1233,-424 -1236,-424 z" 
                      Stretch="Fill" Fill="Beige" Stroke="Gray" StrokeThickness="2"/> 
                <StackPanel Margin="5,5,5,18"> 
                    <StackPanel Orientation="Horizontal"> 
                        <TextBlock Text="Profit for " 
              FontWeight="Bold" FontSize="11"/> 
                        <TextBlock Text="{Binding Path=DataItem.Quarter}" FontWeight="Bold" FontSize="11"/> 
                        <TextBlock Text=": $" FontWeight="Bold" FontSize="11"/> 
                        <TextBlock Text="{Binding Path=DataItem.Profit}" FontWeight="Bold" FontSize="11"/> 
                        <TextBlock Text=" billion" FontWeight="Bold" FontSize="11"/> 
                    </StackPanel> 
                    <StackPanel Orientation="Horizontal" 
            Visibility="{Binding Path=DataItem.PreviousQuarter, Converter={StaticResource QuarterToVisibilityConverter}}"> 
                        <TextBlock Text="Compared to "/> 
                        <TextBlock Text="{Binding Path=DataItem.PreviousQuarter}"/> 
                        <TextBlock Text=": "/> 
                        <TextBlock Text="$" 
              Foreground="{Binding Path=DataItem.PreviousDifference, Converter={StaticResource ProfitToBrushConverter}}"/> 
                        <TextBlock Text="{Binding Path=DataItem.PreviousDifference}" 
              Foreground="{Binding Path=DataItem.PreviousDifference, Converter={StaticResource ProfitToBrushConverter}}"/> 
                        <TextBlock Text=" billion" 
              Foreground="{Binding Path=DataItem.PreviousDifference, Converter={StaticResource ProfitToBrushConverter}}"/> 
                    </StackPanel> 
                    <StackPanel Orientation="Horizontal" 
            Visibility="{Binding Path=DataItem.NextQuarter, Converter={StaticResource QuarterToVisibilityConverter}}"> 
                        <TextBlock Text="Compared to "/> 
                        <TextBlock Text="{Binding Path=DataItem.NextQuarter}"/> 
                        <TextBlock Text=": "/> 
                        <TextBlock Text="$" 
              Foreground="{Binding Path=DataItem.NextDifference, Converter={StaticResource ProfitToBrushConverter}}"/> 
                        <TextBlock Text="{Binding Path=DataItem.NextDifference}" 
              Foreground="{Binding Path=DataItem.NextDifference, Converter={StaticResource ProfitToBrushConverter}}"/> 
                        <TextBlock Text=" billion" 
              Foreground="{Binding Path=DataItem.NextDifference, Converter={StaticResource ProfitToBrushConverter}}"/> 
                    </StackPanel> 
                </StackPanel> 
        </Grid> 
    </DataTemplate> 
</telerik:RadCartesianChart.TooltipTemplate> 

The example uses couple of custom binding converters to pretify the visualization. You can find their implementation.

Example 7: Defining converters in the Resources of the chart

• XAML

<telerik:RadCartesianChart.Resources> 
       <local:ProfitToBrushConverter x:Key="ProfitToBrushConverter"/> 
       <local:QuarterToVisibilityConverter x:Key="QuarterToVisibilityConverter"/> 
</telerik:RadCartesianChart.Resources> 

Example 8: Converters implementation

• C#
• VB.NET

public class QuarterToVisibilityConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
        if (value == null) 
        { 
            return Visibility.Collapsed; 
        } 
 
        return Visibility.Visible; 
    } 
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
        throw new NotImplementedException(); 
    } 
} 
public class ProfitToBrushConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
        double profitDifference = (double)value; 
        if (profitDifference < 0) 
        { 
            return new SolidColorBrush(Colors.Red); 
        } 
        if (profitDifference > 0) 
        { 
            return new SolidColorBrush(Colors.Green); 
        } 
        return new SolidColorBrush(Colors.Green); 
    } 
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
        throw new NotImplementedException(); 
    } 
} 

Public Class QuarterToVisibilityConverter 
    Implements IValueConverter 
 
    Public Function Convert(value As Object, targetType As System.Type, parameter As Object, culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.Convert 
 
        If value Is Nothing Then 
            Return Visibility.Collapsed 
        End If 
 
        Return Visibility.Visible 
    End Function 
 
    Public Function ConvertBack(value As Object, targetType As System.Type, parameter As Object, culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.ConvertBack 
        Throw New NotImplementedException 
    End Function 
End Class 
 
Public Class ProfitToBrushConverter 
    Implements IValueConverter 
 
    Public Function Convert(value As Object, targetType As System.Type, parameter As Object, culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.Convert 
 
        Dim profitDifference As Double = DirectCast(value, Double) 
        If (profitDifference < 0) Then 
            Return New SolidColorBrush(Colors.Red) 
        End If 
 
        If (profitDifference > 0) Then 
            Return New SolidColorBrush(Colors.Green) 
        End If 
 
        Return New SolidColorBrush(Colors.Blue) 
    End Function 
 
    Public Function ConvertBack(value As Object, targetType As System.Type, parameter As Object, culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.ConvertBack 
        Throw New NotImplementedException 
    End Function 
End Class 

Figure 3: Example result