RadControls for Silverlight
Contents

RadChart provides support for displaying tooltips when the mouse cursor hovers over the respective series items.

The tooltips are disabled by default but you can enable them by setting the SeriesDefinition.ShowItemToolTips to True. Moreover, you can enable the functionality for one series and disable it for another in the same chart area. Additionally, you can change the default tooltip format by using SeriesDefinition.ItemToolTipFormat property or you can completely customize the tooltip content by using the ChartArea.ItemToolTipOpening and ChartArea.ItemToolTipClosing events.

The example below shows candlestick chart bound to a collection of TradeData objects, where the TradeData object has the following structure:

CopyC#
using System;
using System.Collections.ObjectModel;
namespace Silverlight.Help.RadChartSamples
{
    public class TradeData
    {
        public string Emission
        {
            get;
            set;
        }
        public DateTime FromDate
        {
            get;
            set;
        }
        public DateTime ToDate
        {
            get;
            set;
        }
        public double Open
        {
            get;
            set;
        }
        public double High
        {
            get;
            set;
        }
        public double Low
        {
            get;
            set;
        }
        public double Close
        {
            get;
            set;
        }
        public double Volume
        {
            get;
            set;
        }
        public static ObservableCollection<TradeData> GetWeeklyData( string code )
        {
            ObservableCollection<TradeData> tradeData;
            tradeData = new ObservableCollection<TradeData>() {
                new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 10 ), Open = 23.4600, High = 23.5500, Low = 23.3000, Close = 23.4200, Volume = 35258950 },
                new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 11 ), Open = 23.3200, High = 23.4000, Low = 23.0500, Close = 23.1300, Volume = 33611790 },
                new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 12 ), Open = 23.1300, High = 23.9000, Low = 23.0300, Close = 23.5300, Volume = 61936270 },
                new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 13 ), Open = 23.6300, High = 23.8500, Low = 23.4000, Close = 23.6200, Volume = 38951990 },
                new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 14 ), Open = 23.6200, High = 23.8000, Low = 23.5100, Close = 23.6900, Volume = 46328540 },
                new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 17 ), Open = 23.3200, High = 23.6000, Low = 23.2300, Close = 23.2500, Volume = 42462890 },
                new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 18 ), Open = 23.2900, High = 23.6520, Low = 23.2700, Close = 23.5800, Volume = 38831620 },
                new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 19 ), Open = 23.2500, High = 23.7200, Low = 23.2500, Close = 23.6500, Volume = 41814320 },
                new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 20 ), Open = 23.6000, High = 23.8700, Low = 23.5400, Close = 23.6700, Volume = 39502680 },
                new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 21 ), Open = 23.9300, High = 24.4200, Low = 23.7700, Close = 24.4100, Volume = 68995700},
                new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 24 ), Open = 24.4100, High = 24.7326, Low = 24.2800, Close = 24.6400, Volume = 54159300 },
                new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 25 ), Open = 24.6000, High = 24.8200, Low = 24.4600, Close = 24.6400, Volume = 43961480 },
                new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 26 ), Open = 24.5900, High = 24.7500, Low = 24.4200, Close = 24.5500, Volume = 41060010 },
                new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 27 ), Open = 24.4100, High = 24.7800, Low = 24.3000, Close = 24.6900, Volume = 45433940 },
                new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 28 ), Open = 25.0700, High = 25.4900, Low = 24.6100, Close = 24.6800, Volume = 55789640 },
                new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 8, 31 ), Open = 24.5700, High = 24.8500, Low = 24.2900, Close = 24.6500, Volume = 49582950 },
                new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 9, 1 ), Open = 24.3500, High = 24.7400, Low = 23.9000, Close = 24.0000, Volume = 62571800 },
                new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 9, 2 ), Open = 23.8200, High = 24.1400, Low = 23.7800, Close = 23.8600, Volume = 40726040 },
                new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 9, 3 ), Open = 23.9100, High = 24.1400, Low = 23.7600, Close = 24.1100, Volume = 34110810 },
                new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 9, 4 ), Open = 24.0900, High = 24.8001, Low = 24.0800, Close = 24.6200, Volume = 44987570 },
                new TradeData() { Emission="MSFT", FromDate = new DateTime( 2009, 9, 8 ), Open = 24.6200, High = 24.8400, Low = 24.4100, Close = 24.8200, Volume = 52243880 } };
            return tradeData;
        }
    }
}
CopyVB.NET
Imports System
Imports System.Collections.ObjectModel
Namespace Silverlight.Help.RadChartSamples
 Public Class TradeData
  Public Property Emission() As String
   Get
    Return m_Emission
   End Get
   Set
    m_Emission = Value
   End Set
  End Property
  Private m_Emission As String
  Public Property FromDate() As DateTime
   Get
    Return m_FromDate
   End Get
   Set
    m_FromDate = Value
   End Set
  End Property
  Private m_FromDate As DateTime
  Public Property ToDate() As DateTime
   Get
    Return m_ToDate
   End Get
   Set
    m_ToDate = Value
   End Set
  End Property
  Private m_ToDate As DateTime
  Public Property Open() As Double
   Get
    Return m_Open
   End Get
   Set
    m_Open = Value
   End Set
  End Property
  Private m_Open As Double
  Public Property High() As Double
   Get
    Return m_High
   End Get
   Set
    m_High = Value
   End Set
  End Property
  Private m_High As Double
  Public Property Low() As Double
   Get
    Return m_Low
   End Get
   Set
    m_Low = Value
   End Set
  End Property
  Private m_Low As Double
  Public Property Close() As Double
   Get
    Return m_Close
   End Get
   Set
    m_Close = Value
   End Set
  End Property
  Private m_Close As Double
  Public Property Volume() As Double
   Get
    Return m_Volume
   End Get
   Set
    m_Volume = Value
   End Set
  End Property
  Private m_Volume As Double
  Public Shared Function GetWeeklyData(code As String) As ObservableCollection(Of TradeData)
   Dim tradeData As ObservableCollection(Of TradeData)
   tradeData = New ObservableCollection(Of TradeData)() With { _
    New TradeData() With { _
     .Emission = "MSFT", _
     .FromDate = New DateTime(2009, 8, 10), _
     .Open = 23.46, _
     .High = 23.55, _
     .Low = 23.3, _
     .Close = 23.42, _
     .Volume = 35258950 _
    }, _
    New TradeData() With { _
     .Emission = "MSFT", _
     .FromDate = New DateTime(2009, 8, 11), _
     .Open = 23.32, _
     .High = 23.4, _
     .Low = 23.05, _
     .Close = 23.13, _
     .Volume = 33611790 _
    }, _
    New TradeData() With { _
     .Emission = "MSFT", _
     .FromDate = New DateTime(2009, 8, 12), _
     .Open = 23.13, _
     .High = 23.9, _
     .Low = 23.03, _
     .Close = 23.53, _
     .Volume = 61936270 _
    }, _
    New TradeData() With { _
     .Emission = "MSFT", _
     .FromDate = New DateTime(2009, 8, 13), _
     .Open = 23.63, _
     .High = 23.85, _
     .Low = 23.4, _
     .Close = 23.62, _
     .Volume = 38951990 _
    }, _
    New TradeData() With { _
     .Emission = "MSFT", _
     .FromDate = New DateTime(2009, 8, 14), _
     .Open = 23.62, _
     .High = 23.8, _
     .Low = 23.51, _
     .Close = 23.69, _
     .Volume = 46328540 _
    }, _
    New TradeData() With { _
     .Emission = "MSFT", _
     .FromDate = New DateTime(2009, 8, 17), _
     .Open = 23.32, _
     .High = 23.6, _
     .Low = 23.23, _
     .Close = 23.25, _
     .Volume = 42462890 _
    }, _
    New TradeData() With { _
     .Emission = "MSFT", _
     .FromDate = New DateTime(2009, 8, 18), _
     .Open = 23.29, _
     .High = 23.652, _
     .Low = 23.27, _
     .Close = 23.58, _
     .Volume = 38831620 _
    }, _
    New TradeData() With { _
     .Emission = "MSFT", _
     .FromDate = New DateTime(2009, 8, 19), _
     .Open = 23.25, _
     .High = 23.72, _
     .Low = 23.25, _
     .Close = 23.65, _
     .Volume = 41814320 _
    }, _
    New TradeData() With { _
     .Emission = "MSFT", _
     .FromDate = New DateTime(2009, 8, 20), _
     .Open = 23.6, _
     .High = 23.87, _
     .Low = 23.54, _
     .Close = 23.67, _
     .Volume = 39502680 _
    }, _
    New TradeData() With { _
     .Emission = "MSFT", _
     .FromDate = New DateTime(2009, 8, 21), _
     .Open = 23.93, _
     .High = 24.42, _
     .Low = 23.77, _
     .Close = 24.41, _
     .Volume = 68995700 _
    }, _
    New TradeData() With { _
     .Emission = "MSFT", _
     .FromDate = New DateTime(2009, 8, 24), _
     .Open = 24.41, _
     .High = 24.7326, _
     .Low = 24.28, _
     .Close = 24.64, _
     .Volume = 54159300 _
    }, _
    New TradeData() With { _
     .Emission = "MSFT", _
     .FromDate = New DateTime(2009, 8, 25), _
     .Open = 24.6, _
     .High = 24.82, _
     .Low = 24.46, _
     .Close = 24.64, _
     .Volume = 43961480 _
    }, _
    New TradeData() With { _
     .Emission = "MSFT", _
     .FromDate = New DateTime(2009, 8, 26), _
     .Open = 24.59, _
     .High = 24.75, _
     .Low = 24.42, _
     .Close = 24.55, _
     .Volume = 41060010 _
    }, _
    New TradeData() With { _
     .Emission = "MSFT", _
     .FromDate = New DateTime(2009, 8, 27), _
     .Open = 24.41, _
     .High = 24.78, _
     .Low = 24.3, _
     .Close = 24.69, _
     .Volume = 45433940 _
    }, _
    New TradeData() With { _
     .Emission = "MSFT", _
     .FromDate = New DateTime(2009, 8, 28), _
     .Open = 25.07, _
     .High = 25.49, _
     .Low = 24.61, _
     .Close = 24.68, _
     .Volume = 55789640 _
    }, _
    New TradeData() With { _
     .Emission = "MSFT", _
     .FromDate = New DateTime(2009, 8, 31), _
     .Open = 24.57, _
     .High = 24.85, _
     .Low = 24.29, _
     .Close = 24.65, _
     .Volume = 49582950 _
    }, _
    New TradeData() With { _
     .Emission = "MSFT", _
     .FromDate = New DateTime(2009, 9, 1), _
     .Open = 24.35, _
     .High = 24.74, _
     .Low = 23.9, _
     .Close = 24.0, _
     .Volume = 62571800 _
    }, _
    New TradeData() With { _
     .Emission = "MSFT", _
     .FromDate = New DateTime(2009, 9, 2), _
     .Open = 23.82, _
     .High = 24.14, _
     .Low = 23.78, _
     .Close = 23.86, _
     .Volume = 40726040 _
    }, _
    New TradeData() With { _
     .Emission = "MSFT", _
     .FromDate = New DateTime(2009, 9, 3), _
     .Open = 23.91, _
     .High = 24.14, _
     .Low = 23.76, _
     .Close = 24.11, _
     .Volume = 34110810 _
    }, _
    New TradeData() With { _
     .Emission = "MSFT", _
     .FromDate = New DateTime(2009, 9, 4), _
     .Open = 24.09, _
     .High = 24.8001, _
     .Low = 24.08, _
     .Close = 24.62, _
     .Volume = 44987570 _
    }, _
    New TradeData() With { _
     .Emission = "MSFT", _
     .FromDate = New DateTime(2009, 9, 8), _
     .Open = 24.62, _
     .High = 24.84, _
     .Low = 24.41, _
     .Close = 24.82, _
     .Volume = 52243880 _
    } _
   }
   Return tradeData
  End Function
 End Class
End Namespace

You can set the ShowItemToolTips property to True declaratively or in the code-behind.

Note

Note that ShowItemToolTips is a property of the SeriesMapping.SeriesDefinition, which means that you can control the tooltips for each series separately.

CopyXAML
<Grid x:Name="LayoutRoot"
        Background="White">
    <telerik:RadChart x:Name="radChart">
        <telerik:RadChart.SeriesMappings>
            <telerik:SeriesMapping>
                <telerik:SeriesMapping.SeriesDefinition>
                    <telerik:CandleStickSeriesDefinition ShowItemToolTips="True"/>
                </telerik:SeriesMapping.SeriesDefinition>
                <telerik:SeriesMapping.ItemMappings>
                    <telerik:ItemMapping DataPointMember="Open"
                                            FieldName="Open" />
                    <telerik:ItemMapping DataPointMember="High"
                                            FieldName="High" />
                    <telerik:ItemMapping DataPointMember="Low"
                                            FieldName="Low" />
                    <telerik:ItemMapping DataPointMember="Close"
                                            FieldName="Close" />
                </telerik:SeriesMapping.ItemMappings>
            </telerik:SeriesMapping>
        </telerik:RadChart.SeriesMappings>
    </telerik:RadChart>
</Grid>

On the snapshot below you can see the default tooltip for the CandleStick chart type:

 

The default tooltip depends on the type of the RadChart:

  • The tooltip for Range charts shows DataPoint.High and DataPoint.Low values.
  • The tooltip for Stick and Candlestick charts shows DataPoint.High, DataPoint.Low, DataPoint.Open and DataPoint.Close values.
  • For all the other chart types, DataPoint.YValue is used.

If the default tooltip does not fit your needs, you can use DataPoint.Tooltip to explicitly specify the exact tooltip text for each data series item. Notice that when DataPoint.Tooltip is set, RadChart will ignore the values set for ItemToolTipFormat.

You can also bind to DataPoint.Tooltip property, using SeriesMapping/ItemMapping with DataPointMember set to Tooltip. Below you can see how to bind the tooltip to the Close property of the underlying TradeData object:

CopyXAML
<Grid x:Name="LayoutRoot"
        Background="White">
    <telerik:RadChart x:Name="radChart">
        <telerik:RadChart.SeriesMappings>
            <telerik:SeriesMapping>
                <telerik:SeriesMapping.SeriesDefinition>
                    <telerik:CandleStickSeriesDefinition ShowItemToolTips="True"
                                                            ItemToolTipFormat="Open: #OPEN{C4}" />
                </telerik:SeriesMapping.SeriesDefinition>
                <telerik:SeriesMapping.ItemMappings>
                    <telerik:ItemMapping DataPointMember="Open"
                                            FieldName="Open" />
                    <telerik:ItemMapping DataPointMember="High"
                                            FieldName="High" />
                    <telerik:ItemMapping DataPointMember="Low"
                                            FieldName="Low" />
                    <telerik:ItemMapping DataPointMember="Close"
                                            FieldName="Close" />
                    <telerik:ItemMapping DataPointMember="Tooltip"
                                            FieldName="Close" />
                </telerik:SeriesMapping.ItemMappings>
            </telerik:SeriesMapping>
        </telerik:RadChart.SeriesMappings>
    </telerik:RadChart>
</Grid>

And on the snapshot below you can see that the tooltip for each data point is taken directly from the Close property of the underlying TradeData, ignoring the value specified in ItemToolTipFormat.

 

Formatting the Tooltip

RadChart allows you to use Format Expressions to format the tooltip text. Use the SeriesDefinition.ItemToolTipFormat property to set the tooltip format for each data series. By using format expressions, you can also add some context data in the tooltip text using tokens.

For example, "#OPEN{0.0000}" means that the tooltip will take the value from the DataPoint.Open property and will format the value using "0.000". When the tooltip is shown, the open value will be formatted with four digits after the decimal point: "147.2746".

You can construct more complex tooltips combining several tokens, for example: "Open: #OPEN{C4}/Close: #CLOSE{C4}1 #DATAITEM.Volume{###,###,##0}". This format expression uses three tokens to obtain the values from the underlying DataPoint object's properties Open, Close and DataItem.Volume. For more about #DATAITEM token take a look at Format Expressions.

CopyXAML
<telerik:RadChart x:Name="radChart">
    <telerik:RadChart.SeriesMappings>
        <telerik:SeriesMapping LegendLabel="MSFT">
            <telerik:SeriesMapping.SeriesDefinition>
                <telerik:CandleStickSeriesDefinition  ShowItemToolTips="True"
                                                ItemToolTipFormat="Open: #OPEN{C4} / Close: #CLOSE{C4}
Volume: #DATAITEM.Volume{###,###,##0}" />
            </telerik:SeriesMapping.SeriesDefinition>
            <telerik:SeriesMapping.ItemMappings>
                <telerik:ItemMapping DataPointMember="Open"
                                        FieldName="Open" />
                <telerik:ItemMapping DataPointMember="High"
                                        FieldName="High" />
                <telerik:ItemMapping DataPointMember="Low"
                                        FieldName="Low" />
                <telerik:ItemMapping DataPointMember="Close"
                                        FieldName="Close" />

            </telerik:SeriesMapping.ItemMappings>
        </telerik:SeriesMapping>
    </telerik:RadChart.SeriesMappings>
</telerik:RadChart>
CopyC#
Telerik.Windows.Controls.RadChart radChart = new Telerik.Windows.Controls.RadChart();
SeriesMapping seriesMapping = new SeriesMapping();
seriesMapping.SeriesDefinition = new CandleStickSeriesDefinition();
seriesMapping.SeriesDefinition.ShowItemToolTips = true;
seriesMapping.SeriesDefinition.ItemToolTipFormat = "Open: #OPEN{C4} / Close: #CLOSE{C4}\nVolume: #DATAITEM.Volume{###,###,##0}";
seriesMapping.ItemMappings.Add( new ItemMapping( "Open", DataPointMember.Open) );
seriesMapping.ItemMappings.Add( new ItemMapping( "High", DataPointMember.High) );
seriesMapping.ItemMappings.Add( new ItemMapping( "Low", DataPointMember.Low) );
seriesMapping.ItemMappings.Add( new ItemMapping( "Close", DataPointMember.Close) );
radChart.SeriesMappings.Add( seriesMapping );
CopyVB.NET
Dim radChart As New Telerik.Windows.Controls.RadChart()
Dim seriesMapping As New SeriesMapping()
seriesMapping.SeriesDefinition = New CandleStickSeriesDefinition()
seriesMapping.SeriesDefinition.ShowItemToolTips = True
seriesMapping.SeriesDefinition.ItemToolTipFormat = "Open: #OPEN{C4} / Close: #CLOSE{C4}" & vbLf & "Volume: #DATAITEM.Volume{###,###,##0}"
seriesMapping.ItemMappings.Add(New ItemMapping("Open", DataPointMember.Open))
seriesMapping.ItemMappings.Add(New ItemMapping("High", DataPointMember.High))
seriesMapping.ItemMappings.Add(New ItemMapping("Low", DataPointMember.Low))
seriesMapping.ItemMappings.Add(New ItemMapping("Close", DataPointMember.Close))radChart.SeriesMappings.Add(seriesMapping)

The snapshot below shows the customized tooltip:

 

If you need more information about label formatting take a look at the Format Expressions topic.

Tip
To be able to show the ToolTip content separated on new line in XAML you should use the hexidecimally encoded value " " to represent the "\n" literal.

Customizing Tooltip Content

Expression formats are useful when the tooltip represents plain text messages. However, as a ContentControl you can completely customize its appearance using the two events exposed by ChartArea:

  • ChartArea.ItemToolTipOpening - use to define the content of the tooltip.
  • ChartArea.ItemToolTipClosing - use to clear any resources related to the shown tooltip.

The next example demonstrates how to use StockToolTipControl - a custom user control as a tooltip on a Candlestick chart. As a RadChart.ItemSource, a list of TradeData objects will be used (more about data binding you can find here).

Now, StockToolTipControl has to be created. It will show additional information in a grid:

CopyXAML
<UserControl >
    <UserControl.Resources>
        <Style x:Key="textStyle" TargetType="TextBlock">
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontSize" Value="10.667"/>
        </Style>
    </UserControl.Resources>
    <Border BorderThickness="2">
        <Grid x:Name="LayoutRoot">
           <Grid.ColumnDefinitions>
                <ColumnDefinition  />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <TextBlock Text="Change [%]: " Grid.Column="0" Grid.Row="0" Style="{StaticResource textStyle}" />
            <Path x:Name="arrow" Fill="Red" Grid.Column="0" Grid.Row="0" Stroke="White"
  HorizontalAlignment="Right" VerticalAlignment="Center"
  Data="M0.000000,0.000000 L20.000000,0.000000 L10.000000,10.000000 z" RenderTransformOrigin="0.5,0.5">
                <Path.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="0.65" ScaleY="0.45"/>
                        <SkewTransform/>
                        <RotateTransform x:Name="rotateTransform"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Path.RenderTransform>
            </Path>
            <TextBlock Text="N/A" x:Name="changeNetPercent" Grid.Column="1" Grid.Row="0" Style="{StaticResource textStyle}" />
            <TextBlock Text="Volume:" Grid.Column="0" Grid.Row="1" Style="{StaticResource textStyle}" />
            <TextBlock Text="N/A" x:Name="volume" Grid.Column="1" Grid.Row="1" Style="{StaticResource textStyle}" />
            <TextBlock Text="1y Target Est:" Grid.Column="0" Grid.Row="2" Style="{StaticResource textStyle}" />
            <TextBlock Text="N/A" x:Name="oneYearTargetEst" Grid.Column="1" Grid.Row="2" Style="{StaticResource textStyle}" />
            <TextBlock Text="P/E Ration: " Grid.Column="0" Grid.Row="3" Style="{StaticResource textStyle}" />
            <TextBlock Text="N/A" x:Name="peRatio" Grid.Column="1" Grid.Row="3" Style="{StaticResource textStyle}" />
            <TextBlock Text="Forwarding P/E (1yr): " Grid.Column="0" Grid.Row="4" Style="{StaticResource textStyle}" />
            <TextBlock Text="N/A" x:Name="forwardingPE" Grid.Column="1" Grid.Row="4" Style="{StaticResource textStyle}" />
        </Grid>
    </Border>
</UserControl>

In the code-behind, there are a few properties - each one is setting the value of the appropriate text box:

CopyC#
using System.Windows.Controls;
using System.Windows.Media;
namespace Silverlight.Help.RadChartSamples
{
    public partial class StockToolTipControl : UserControl
    {
        public StockToolTipControl()
        {
            InitializeComponent();
        }
        public double ChangeNetPercent
        {
            set
            {
                this.changeNetPercent.Text = value.ToString( "p" );
                this.arrow.Fill = new SolidColorBrush( value < 0.0 ? Colors.Red : Colors.Green );
                this.rotateTransform.Angle = value < 0.0 ? 0 : 180;
            }
        }
        public double Volume
        {
            set
            {
                this.volume.Text = value.ToString( ",##0" );
            }
        }
        public double OneYearTargetEst
        {
            set
            {
                this.oneYearTargetEst.Text = value.ToString( "C" );
            }
        }
        public double PERatio
        {
            set
            {
                this.peRatio.Text = value.ToString( "00.00" );
            }
        }
        public double ForwardingPE
        {
            set
            {
                this.forwardingPE.Text = value.ToString( "00.00" );
            }
        }
    }
}
CopyVB.NET
Imports System.Windows.Controls
Imports System.Windows.Media
Namespace Silverlight.Help.RadChartSamples
 Public Partial Class StockToolTipControl
  Inherits UserControl
  Public Sub New()
   InitializeComponent()
  End Sub
  Public WriteOnly Property ChangeNetPercent() As Double
   Set
    Me.changeNetPercent.Text = value.ToString("p")
    Me.arrow.Fill = New SolidColorBrush(If(value < 0.0, Colors.Red, Colors.Green))
    Me.rotateTransform.Angle = If(value < 0.0, 0, 180)
   End Set
  End Property
  Public WriteOnly Property Volume() As Double
   Set
    Me.volume.Text = value.ToString(",##0")
   End Set
  End Property
  Public WriteOnly Property OneYearTargetEst() As Double
   Set
    Me.oneYearTargetEst.Text = value.ToString("C")
   End Set
  End Property
  Public WriteOnly Property PERatio() As Double
   Set
    Me.peRatio.Text = value.ToString("00.00")
   End Set
  End Property
  Public WriteOnly Property ForwardingPE() As Double
   Set
    Me.forwardingPE.Text = value.ToString("00.00")
   End Set
  End Property
 End Class
End Namespace

You can play with the colors to give the control a better look and feel.The next step is to assign an event handler to the ChartArea.ItemToolTipOpening event:

CopyXAML
<Grid x:Name="LayoutRoot"
        Background="White">
    <!--Custom tooltip-->
    <telerik:RadChart x:Name="radChart">
        <telerik:RadChart.DefaultView>
            <telerik:ChartDefaultView>
                <telerik:ChartDefaultView.ChartArea>
                    <telerik:ChartArea ItemToolTipOpening="ChartArea_ItemToolTipOpening" />
                </telerik:ChartDefaultView.ChartArea>
            </telerik:ChartDefaultView>
        </telerik:RadChart.DefaultView>
        <telerik:RadChart.SeriesMappings>
            <telerik:SeriesMapping LegendLabel="MSFT">
                <telerik:SeriesMapping.SeriesDefinition>
                    <telerik:CandleStickSeriesDefinition ShowItemToolTips="True" />
                </telerik:SeriesMapping.SeriesDefinition>
                <telerik:SeriesMapping.ItemMappings>
                    <telerik:ItemMapping DataPointMember="Open"
                                            FieldName="Open" />
                    <telerik:ItemMapping DataPointMember="High"
                                            FieldName="High" />
                    <telerik:ItemMapping DataPointMember="Low"
                                            FieldName="Low" />
                    <telerik:ItemMapping DataPointMember="Close"
                                            FieldName="Close" />
                </telerik:SeriesMapping.ItemMappings>
            </telerik:SeriesMapping>
        </telerik:RadChart.SeriesMappings>
    </telerik:RadChart>
</Grid>

ItemToolTipOpening event handler has two parameters:

  • ItemToolTip2D tooltip - the tooltip control to customize.
  • ItemToolTipEventArgs e - event arguments from where you can take the DataPoint for which the tooltip has to be shown.

The final step is to create a new instance of the StockToolTipControl and to initialize its properties. ItemToolTipEventArgs.DataPoint.DataItem has to be used. It holds the TradingData object associated to this DataPoint:

CopyC#
private void ChartArea_ItemToolTipOpening( ItemToolTip2D tooltip, ItemToolTipEventArgs e )
{
    TradeData tradeData = e.DataPoint.DataItem as TradeData;
    StockToolTipControl stockToolTip = new StockToolTipControl();
    stockToolTip.ChangeNetPercent = 1 - ( tradeData.Close / tradeData.Open );
    stockToolTip.Volume = tradeData.Volume;
    //The next three properties shows some fictional data to illustrate the idea
    stockToolTip.OneYearTargetEst = tradeData.Close * 1.1;
    stockToolTip.PERatio = 16.80;
    stockToolTip.ForwardingPE = 17.93;
    tooltip.Content = stockToolTip;
}
CopyVB.NET
Private Sub ChartArea_ItemToolTipOpening(ByVal tooltip As ItemToolTip2D, ByVal e As ItemToolTipEventArgs)
    Dim tradeData As TradeData = TryCast(e.DataPoint.DataItem, TradeData)
    Dim stockToolTip As New StockToolTipControl()
    stockToolTip.ChangeNetPercent = 1 - (tradeData.Close / tradeData.Open)
    stockToolTip.Volume = tradeData.Volume
    'The next three properties shows some fictional data to illustrate the idea
    stockToolTip.OneYearTargetEst = tradeData.Close * 1.1
    stockToolTip.PERatio = 16.8R
    stockToolTip.ForwardingPE = 17.93

    tooltip.Content = stockToolTip
End Sub

As you can see, the new instance of StockToolTipControl is created, initialized and set to toolTip.Content:

 

Tip
Check out how a Drill Down Chart is created using customized tooltip.

See Also