How to customize the tooltip in chart?
Tooltip in chart has various customizations that help us to visualize the chart with more flexibility and information. Let’s discuss some of the commonly used customizations of tooltip in chart.
- How to enable tooltip for chart
- How to apply template for tooltip
- How to format the text in the tooltip
- How to add an image in the tooltip
- How to add a chart inside tooltip
Default Tooltip
Tooltip can be enabled by setting the ShowTooltip property of ChartSeries to true. By default, the tooltip shows the y-value of hovering ChartSegment.
Code snippet
<chart:SfChart>
…
<chart:ColumnSeries XBindingPath="XValue"
YBindingPath="YValue"
ItemsSource="{Binding Data}"
ShowTooltip="True" >
</chart:ColumnSeries>
</chart:SfChart>
Output
Applying template for tooltip
The desired tooltip template can be set to the TooltipTemplate property of ChartSeries. The hovered ChartSegment of the tooltip is set as the DataContext for template.
Code snippet
<chart:ColumnSeries>
<chart:ColumnSeries.TooltipTemplate>
<DataTemplate>
<Border Background="White" Padding="4" BorderThickness="1" BorderBrush="Black">
<StackPanel Orientation="Vertical" >
<StackPanel Orientation="Horizontal">
<TextBlock Text="X Value: " />
<TextBlock Text="{Binding Item.XValue}" HorizontalAlignment="Right"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Y Value: " />
<TextBlock Text="{Binding Item.YValue}" HorizontalAlignment="Right"/>
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
</chart:ColumnSeries.TooltipTemplate>
</chart:ColumnSeries>
Output
Formatting tooltip content
The tooltip content can be formatted by formatting the text element used in TooltipTemplate.
Code snippet
<chart:ColumnSeries.TooltipTemplate>
<DataTemplate>
<Border Background="White" Padding="4" BorderThickness="1" BorderBrush="Black">
<TextBlock Text="{Binding Path=Item.YValue, StringFormat='{}{0:c}'}"
HorizontalAlignment="Right"/>
</Border>
</DataTemplate>
</chart:ColumnSeries.TooltipTemplate>
Output
Adding image for tooltip content
Image can be set to tooltip content by defining it in TooltipTemplate.
Code snippet
<chart:ColumnSeries.TooltipTemplate>
<DataTemplate >
<Border BorderBrush="Black" BorderThickness="1">
…
<Image Grid.RowSpan="2" Grid.Column="0" HorizontalAlignment="Left" Margin="3"
Source="{Binding Item.ImagePath}" ></Image>
</Border>
</DataTemplate>
</chart:ColumnSeries.TooltipTemplate>
Output
Adding chart in tooltip content
Chart can be set as tooltip content by defining a chart inside TooltipTemplate.
Code snippet
<chart:ColumnSeries.TooltipTemplate>
<DataTemplate>
<chart:SfChart AreaBorderThickness="0" Width="250" Height="150"
Background="White" BorderBrush="Black" BorderThickness="1" >
<chart:SfChart.Header>
<TextBlock Text="Reports in quarters" FontSize="15" FontWeight="Bold"
Margin="0,6,0,0"/>
</chart:SfChart.Header>
<chart:PieSeries XBindingPath="Month" YBindingPath="Sales"
ItemsSource="{Binding Item.InternalData}"
LabelPosition="OutsideExtended">
<chart:PieSeries.AdornmentsInfo>
<chart:ChartAdornmentInfo ShowLabel="True" ShowConnectorLine="True" />
</chart:PieSeries.AdornmentsInfo>
</chart:PieSeries>
</chart:SfChart>
</DataTemplate>
</chart:ColumnSeries.TooltipTemplate>
Output
