WPF Toolkit Chart – Custom tooltip on LineSeries charts

NET%20LogoA simple code example about how easily customize your charts tooltip. In this example I just display the value of the X and Y axis in the tooltip.

<chartingToolkit:Chart Title="Demo Chart">
	<chartingToolkit:LineSeries  DependentValuePath="Value" 
									IndependentValuePath="Key" 
									ItemsSource="{Binding}" 
									IsSelectionEnabled="True">
		<chartingToolkit:LineSeries.DataPointStyle>
			<Style TargetType="chartingToolkit:DataPoint">
				<Setter Property="Background" Value="#0077CC" />
				<Setter Property="BorderBrush" Value="White"/>
				<Setter Property="BorderThickness" Value="2"/>
				<Setter Property="IsTabStop" Value="False"/>
				<Setter Property="Template">
					<Setter.Value>
						<ControlTemplate TargetType="chartingToolkit:LineDataPoint">
							<Grid x:Name="Root" Opacity="1">
								<ToolTipService.ToolTip>
									<StackPanel Margin="2,2,2,2">
										<ContentControl Content="{TemplateBinding IndependentValue}" ContentStringFormat="Date : {0}"/>
										<ContentControl Content="{TemplateBinding DependentValue}" ContentStringFormat="Count : {0:###,###,###}"/>
									</StackPanel>
								</ToolTipService.ToolTip>
								<Ellipse StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}"/>
							</Grid>
						</ControlTemplate>
					</Setter.Value>
				</Setter>
			</Style>
		</chartingToolkit:LineSeries.DataPointStyle>
	</chartingToolkit:LineSeries>
</chartingToolkit:Chart>

Published by Emmanuel Istace

Musician, Software developer and guitar instructor. https://emmanuelistace.be/

4 thoughts on “WPF Toolkit Chart – Custom tooltip on LineSeries charts

  1. Thanks for the post, Emmanuel. I implemented binding with mixed results. See results at: http://social.msdn.microsoft.com/Forums/vstudio/en-US/71de6f54-4fd5-435c-92ee-63360a3b29fd/how-is-code-behind-used-to-set-custom-tooltip-for-lineseries?forum=wpf

    I have another question. I can get the code behind method for binding the data to work in the element. However, I cannot get it to work in the element. I get an error in the code behind saying “TextBlockChartFirstPoint” does not exist in the current context. Where should I call this method in the XAML for the data point’s tooltip to contain this formatted string and for the solution to compile?

    1. Hi Emmanuel. I eventually managed to bind the contents of TextBlock elements to LineDataPoint ToolTip elements. Unfortunately, the code only works in SilverLight applications but not in WPF applications where the ToolTip elements are blank. Do you have any pointers for me to consider? The snippets of code are presented at: http://social.msdn.microsoft.com/Forums/vstudio/en-US/f8a6d2a7-5aef-43f2-a2c5-3d2b6c4fa144/binding-external-textblock-content-to-chart-contentcontrol-in-wpf?forum=wpf

      I appreciate your help.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: