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 display underlying model data in tooltip?

Platform: WinRT |
Control: SfChart |
Published Date: May 13, 2015 |
Last Revised Date: June 27, 2019

Description:

The chart series tooltip shows YData of the series, by default. The SfChart allows you to display the underlying model of the series in tooltip. This article describes how to show the underlying model.

Solution:

In series, each segment holds the corresponding underlying model in the Item property. To display the tooltip from the underlying model, use the ToolTipTemplate property. In that template, you can bind the Item property of the segment to the Text property of the TextBlock as illustrated in the following code.

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;
}        

The following screenshot displays the tooltip with underlying model data.

Output

Chart tooltip with underlaying model in WPF

Figure 1: Tooltip with underlying model data.

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.

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