How to display more information in the Tooltip of WinUI Chart (SfCartesianChart)?

This article explains how to display more data on the tooltip in the WinUI (SfCartesianChart).

To display more data on a tooltip, you can use the TooltipTemplate property and set the EnableTooltip property to true. The TooltipTemplate should be a DataTemplate that allows you to display additional data and provide more information about the corresponding data point, as shown in the following code sample.

[Xaml]

  <chart:SfCartesianChart x:Name="chart" HorizontalHeaderAlignment="Center" Margin="10">
        <chart:SfCartesianChart.Resources>
            <DataTemplate x:Key="tooltipTemplate1">
                <StackPanel Orientation="Vertical">
                    <TextBlock Margin="3" Text="{Binding Item.ProductName}"  Foreground="Black"
		            FontWeight="Medium"    FontSize="12"   HorizontalAlignment="Center"
	                          VerticalAlignment="Center"/>
                    <StackPanel  Margin="3" Background="Gray" Height="1" />

                    <StackPanel  Margin="3" Orientation="Horizontal">
                        <TextBlock Text="Seles Price"   Foreground="Black" FontWeight="Medium" 
			 FontSize="12" HorizontalTextAlignment="Start"
			 HorizontalAlignment="Center"   VerticalAlignment="Center"/>
                        <TextBlock Text=" : " Foreground="Black"   FontWeight="Medium"
			 FontSize="12"    HorizontalAlignment="Center"
			 VerticalAlignment="Center"/>
                        <TextBlock Text="{ Binding  Item.SellingPrice}" Foreground="Black" FontSize="12"
			 FontWeight="Medium"   HorizontalTextAlignment="End"
			 HorizontalAlignment="Center"    VerticalAlignment="Center"/>
                    </StackPanel>

                    <StackPanel  Margin="3" Orientation="Horizontal">
                        <TextBlock Text="Marked Price"  Foreground="Black"  FontWeight="Medium" 
			 FontSize="12" HorizontalTextAlignment="Start"
			 HorizontalAlignment="Center"  VerticalAlignment="Center"/>
                        <TextBlock Text=" :  "   Foreground="Black"   FontWeight="Medium" FontSize="12" 
			  HorizontalAlignment="Center"   VerticalAlignment="Center"/>
                        <TextBlock Text="{ Binding  Item.MarkedPrice}" Foreground="Black"
			 FontWeight="Medium"   FontSize="12" HorizontalTextAlignment="End"
			 HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </StackPanel>

                    <StackPanel  Margin="3" Orientation="Horizontal">
                        <TextBlock Text="Sales Quantity" Foreground="Black" FontWeight="Medium" 
			 FontSize="12" HorizontalTextAlignment="Start"
			 HorizontalAlignment="Center"  VerticalAlignment="Center"/>
                        <TextBlock Text=" :  "   Foreground="Black"   FontWeight="Medium"   FontSize="12" 
			 HorizontalAlignment="Center"    VerticalAlignment="Center"/>
                        <TextBlock Text="{ Binding  Item.SalesQuantity}" Foreground="Black"
			 FontWeight="Medium"   FontSize="12" HorizontalTextAlignment="End"
			 HorizontalAlignment="Center"   VerticalAlignment="Center"/>
                    </StackPanel>

                    <StackPanel  Margin="3" Orientation="Horizontal">
                        <TextBlock Text="Discount" HorizontalTextAlignment="Start"   Foreground="Black"
			 FontWeight="Medium"   FontSize="12"
			 HorizontalAlignment="Center"  VerticalAlignment="Center"/>
                        <TextBlock Text=" :  "   Foreground="Black"   FontWeight="Medium" FontSize="12"    
			HorizontalAlignment="Center"  VerticalAlignment="Center"/>
                        <TextBlock Text="{ Binding  Item.Discount}" Foreground="Black"
			FontWeight="Medium" FontSize="12" HorizontalTextAlignment="End"
			HorizontalAlignment="Center"   VerticalAlignment="Center"/>

                    </StackPanel>
                </StackPanel>
            </DataTemplate>

   </chart:SfCartesianChart.Resources>
…
<chart:SfCartesianChart.Series>
            <chart:ColumnSeries TooltipTemplate="{StaticResource tooltipTemplate1}"
                XBindingPath="Date" Fill="DeepPink" EnableTooltip="True"
                YBindingPath="SellingPrice" ItemsSource="{Binding Data}">
            </chart:ColumnSeries>
        </chart:SfCartesianChart.Series>
</chart:SfCartesianChart>

[C#]

  SfCartesianChart sfCartesianChart = new SfCartesianChart();
            ViewModel viewModel = new ViewModel();
            sfCartesianChart.DataContext = viewModel;
…
ColumnSeries columnSeries = new ColumnSeries()
            {
                XBindingPath = "Date",
                YBindingPath = "SellingPrice",
                ItemsSource = viewModel.Data,
                Fill = new SolidColorBrush(Colors.DeepPink),
                TooltipTemplate = chart.Resources["tooltipTemplate1"] as DataTemplate,
                EnableTooltip = true,
            };
…

Furthermore, you can enhance the appearance of the tooltip by setting the tooltip style using the Style property in the ChartTooltipBehavior. This will make the tooltip more visually appealing. You can also specify the duration for which the tooltip will be displayed by using the Duration property, which takes the duration time in milliseconds as shown in the following code sample.

[Xaml]

<chart:SfCartesianChart x:Name="chart" HorizontalHeaderAlignment="Center" Margin="10">
        <chart:SfCartesianChart.Resources>
           <Style TargetType="Path" x:Key="style">
                <Setter Property="Stroke" Value="Black"/>
                <Setter Property="Fill" Value="GhostWhite"/>
                <Setter Property="StrokeThickness" Value="1"/>
            </Style>
</chart:SfCartesianChart.Resources>
<chart:SfCartesianChart.TooltipBehavior>
            <chart:ChartTooltipBehavior Duration="3000" EnableAnimation="True"
                                        Style="{StaticResource style}"/>
        </chart:SfCartesianChart.TooltipBehavior>

C#

ChartTooltipBehavior chartTooltipBehavior = new ChartTooltipBehavior()
            {
                Style = chart.Resources["style"] as Style,
                Duration = 3000,
                EnableAnimation = true,
            };
sfCartesianChart.TooltipBehavior = chartTooltipBehavior;

If you want to add animation to the tooltip, you can use the EnableAnimation property to enable animation effects for the tooltip.

Output

You can download the sample in GitHub.

By utilizing these features, you can effectively display more data on tooltips in the WinUI (SfCartesianChart) and enhance the overall user experience.

Conclusion

I hope you enjoyed learning about how to Display More Information in the Tooltip of WinUI Chart (SfCartesianChart).

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

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

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!