Articles in this section
Category / Section

How to display more data in the tooltip in WinUI Chart (SfCartesianChart)?

2 mins read

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

 

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

 

<chart:SfCartesianChart Header="Population Growth">
    <chart:SfCartesianChart.DataContext>
        <local:ViewModel/>
    </chart:SfCartesianChart.DataContext>
 
    <chart:SfCartesianChart.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="tooltipTemplate">
                <StackPanel Orientation="Horizontal">
                    <!--Template element has DataContext as its Segment named Item. From it, you can access the corresponding Model-->
                    <TextBlock  FontFamily="Segoe UI" Foreground="White">
                       <Run Text="{Binding Item.Country}"/>
                       <Run Text=":"/>  
                       <Run Text="{Binding Item.Population}"/>
                    </TextBlock>
                </StackPanel>
            </DataTemplate>
        </ResourceDictionary>
    </chart:SfCartesianChart.Resources>
 
    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis/>
    </chart:SfCartesianChart.XAxes>
    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>
 
    <chart:ColumnSeries ItemsSource="{Binding Data}"
                        XBindingPath="Country" YBindingPath="Population"
                        EnableTooltip="True"
                        TooltipTemplate="{StaticResource tooltipTemplate}">
    </chart:ColumnSeries>
</chart:SfCartesianChart>

 

Output

WinUI chart tooltip with more data.

 

View sample in GitHub

 

See also

 

How to customize the tooltip background style?

 

Conclusion

I hope you enjoyed learning about how to display more data in the tooltip in WinUI Chart (SfCartesianChart).

You can refer to our WinUI Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our WinUI Chart Documentation to understand how to present and manipulate data.

For current customers, you can check out our WinUI 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  WinUI Chart and other WinUI components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac or feedback portal. We are always happy to assist you!

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied