/How-to-display-multiple-data-information-in-the-tooltip-of-WPF-Charts

This demo explains how to make the tooltip to display any other value from the underlying model in WPF Charts

Primary LanguageC#

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

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>

Output:

Tooltip with more data in WPF chart

KB article - How to make the tooltip to display any other value from the underlying model in WPF Chart (SfChart)?

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