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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to display more data in the tooltip of WPF Chart (SfChart)?

Platform: WPF |
Control: SfChart |
Published Date: July 21, 2015 |
Last Revised Date: July 13, 2021

WPF Chart provides the support to display the needed information from its model of populated items source along with Tooltip UI customization with the help of TooltipTemplate in the chart series as shown in the following code example.

 

Here, display the both country's name and its population details in the tooltip. By default, it displays the corresponding y-axis value of that segment.

 

<Window.DataContext>
        <local:ViewModel/>
</Window.DataContext>
<Window.Resources>
      <DataTemplate x:Key="tooltipTemplate">
           <StackPanel Orientation="Horizontal">
               <!--Template element has DataContext as its Segment named Item. From it, you can access the correponding Model-->
               <TextBlock  FontFamily="Segoe UI"  Foreground="White">
                   <Run Text="{Binding Item.Country}"/>
                   <Run Text=":"/>  
                   <Run Text="{Binding Item.Population}"/>
               </TextBlock>
           </StackPanel>
      </DataTemplate>
</Window.Resources>
<StackPanel>
    <syncfusion:SfChart Header="Population growth" Width="353" Height="298">
        <syncfusion:SfChart.PrimaryAxis>
            <syncfusion:CategoryAxis/>
        </syncfusion:SfChart.PrimaryAxis>
        <syncfusion:SfChart.SecondaryAxis>
            <syncfusion:NumericalAxis/>
        </syncfusion:SfChart.SecondaryAxis>
        <syncfusion:ColumnSeries 
                         ItemsSource="{Binding Data}"
                         XBindingPath="Country"
                         YBindingPath="Population"
                         ShowTooltip="True"
                         TooltipTemplate="{StaticResource tooltipTemplate}"/>
    </syncfusion:SfChart>
</StackPanel>

 

WPF Chart tooltip showing multiple values

 

View sample in GitHub

 

See also

 

How to display the tooltip when the mouse is in any region of the FastLineBitmapSeries in WPF Charts

How to customize WPF Charts tooltip

How to set the duration for chart tooltip

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
Eduardo Arruda
Mar 03, 2021

I get an Exception when tooltip should appear.

The following message appear under "<TextBlock Text= "{Binding Converter={StaticResource conver}}" />"

"An object of the type "BioPlatAQC.ModuleViews.LoadSampleView" cannot be applied to a property that expects the type "System.Windows.Data.IValueConverter"."

Reply
Eduardo Arruda
Mar 03, 2021

The Exception: System.Windows.Markup.XamlParseException: ''Set property 'System.Windows.Data.Binding.Converter' threw an exception.' Line number '15' and line position '24'.'

Inner Exception InvalidCastException: Unable to cast object of type 'BioPlatACQ.ModuleViews.Views.LoadSampleView' to type 'System.Windows.Data.IValueConverter'.

This exception was originally thrown at this call stack: [External Code]

Yuvaraj Palanisamy [Syncfusion]
Mar 05, 2021

Hi Eduardo Arruda,

Greetings from Syncfusion.

We have Checked the reported problem with our KB document “Make tooltip to display X and Y value together”, and it was working fine at our end. Also, we have prepared the sample for your reference. Please find the sample from the below link.

Sample

Regards, Yuvaraj.

Eduardo Arruda
Mar 05, 2021

Thank you Yuvaraj. It is working. I've made a mistake on the line

"<local:Converter x:Key="conver"/>"

now is working.

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

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

Live Chat Icon For mobile