How to display underlying model data in tooltip of WPF Chart (SfChart)?
Description
The WPF SfChart allows you to customize the tooltip to show an underlying data using the ToolTipTemplate property. By default, the SfChart displays the Y-Value of the series in the tooltip. This is particularly useful when extra context are required in tooltips.
Solution
To display underlying model data in the tooltip of an SfChart, use the ToolTipTemplate property of the series. In that template, bind the YData for the default Y-value and Item property of the segment to the Text property of the TextBlock.
XAML
<!—ToolTipTemplate for the series -->
<Grid.Resources>
<DataTemplate x:Key="tooltipTemplate">
<Border BorderBrush="Brown" BorderThickness="3">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Background="PaleGreen" >
<TextBlock Text="Value : " Margin="5"
VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="13" FontWeight="Bold"/>
<TextBlock Text="Text : " Margin="5"
VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="13" FontWeight="Bold"/>
</StackPanel>
<StackPanel Background="PaleGreen" Grid.Column="1">
<TextBlock Text="{Binding YData,StringFormat=N}" Margin="5"
VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="13" FontWeight="Bold"/>
<TextBlock Text="{Binding Item.Text}" Margin="5"
VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="13" FontWeight="Bold"/>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</Grid.Resources>
<!—Adding Chart -->
<chart:SfChart x:Name="chart" Margin="10" Header="Product Details" FontSize="18">
<chart:SfChart.DataContext>
<local:ViewModel/>
</chart:SfChart.DataContext>
<chart:SfChart.PrimaryAxis>
<chart:CategoryAxis Header="Product ID"/>
</chart:SfChart.PrimaryAxis>
<chart:SfChart.SecondaryAxis>
<chart:NumericalAxis Header="Value"/>
</chart:SfChart.SecondaryAxis>
<chart:ColumnSeries XBindingPath="ProdId" YBindingPath="Price" ItemsSource="{Binding Products}" TooltipTemplate="{StaticResource tooltipTemplate}" ShowTooltip="True" />
</chart:SfChart>
C#
public MainWindow()
{
InitializeComponent();
GetSeries();
}
private void GetSeries()
{
ColumnSeries series = new ColumnSeries();
ViewModel obj = new ViewModel();
series.ItemsSource = obj.Products;
series.XBindingPath = "ProdId";
series.YBindingPath = "Price";
chart.Series.Add(series);
series.ShowTooltip = true;
series.TooltipTemplate = SetToolTipTemplate();
}
private DataTemplate SetToolTipTemplate()
{
DataTemplate template = new DataTemplate();
FrameworkElementFactory txtblock = new FrameworkElementFactory(typeof(TextBlock));
txtblock.SetValue(TextBlock.WidthProperty, 85.0);
txtblock.SetValue(TextBlock.HeightProperty, 25.0);
txtblock.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center);
txtblock.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center);
txtblock.SetValue(TextBlock.FontSizeProperty, 15.0);
Binding binding = new Binding();
binding.Path = new PropertyPath("YData");
txtblock.SetValue(TextBlock.TextProperty, binding);
FrameworkElementFactory txtblock1 = new FrameworkElementFactory(typeof(TextBlock));
txtblock1.SetValue(TextBlock.WidthProperty, 85.0);
txtblock1.SetValue(TextBlock.HeightProperty, 25.0);
txtblock1.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Center);
txtblock1.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Center);
Binding binding1 = new Binding();
binding1.Path = new PropertyPath("Item.Text");//Gets the Price property value from Observable collection.
txtblock1.SetValue(TextBlock.TextProperty, binding1);
FrameworkElementFactory grid = new FrameworkElementFactory(typeof(StackPanel));
grid.AppendChild(txtblock1);
grid.AppendChild(txtblock);
template.VisualTree = grid;
return template;
}
Output
Conclusion
I hope you enjoyed learning about how to display underlying model data in tooltip of WPF Chart (SfChart).
You can refer to our WPF Chart feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF Chart documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
