Version

Chart Tooltips

This topic explains, with code examples, how to enable the default tooltips in the XamDataChart™ control and how to create custom ones.

Introduction

In the XamDataChart control, tooltips are displayed as long as mouse cursor hovers over series in the XamDataChart control .

Tooltips Overview

The XamDataChart control provides default tooltips for each type of series. Default tooltips are enabled by setting the ShowDefaultTooltip property to True. The default tooltips display all the information relevant to the particular series item (series title, data values, axis values etc.) and are styled to match the series' style.

If default tooltips are not sufficient, custom tooltips can be configured as well. Tooltips can be customized in the following aspects:

  • tooltip content

  • tooltip look-and-feel

The tooltip content is customized by providing custom content to the ToolTip property of the Series object. Tooltip look-and-feel is managed through the ToolTipStyle property of the XamDataChart control.

Note: If a custom ToolTip is set, the ShowDefaultTooltip setting is disregarded.

Default Tooltip

The following screenshot demontrates the default tooltip for category series.

xamDataChart Chart Tooltips 0.png

Code Example: Displaying Custom Tooltips

This example demonstrates how to display tooltip information about the open, high, low, and close sales volumes for any point in a financial graph. This is achieved by creating custom tooltips that will display the volume value on LineSeries and the open, high, low, and close values on FinancialPriceSeries.

Preview

xamDataChart Chart Tooltips 01.png

Figure 1: The XamDataChart control with custom tooltip showing values of Financial Price Series

Steps

  1. Add a custom style for the chart’s Tooltip.

In XAML:

<UserControl.Resources>
   <Style x:Key="ToolTipStyle" TargetType="ContentControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ContentControl">
                    <StackPanel Orientation="Horizontal" Margin="5">
                        <ContentPresenter Margin="{TemplateBinding Padding}" Content="{Binding}" ContentTemplate="{Binding Series.LegendItemBadgeTemplate}" />
                        <ContentPresenter Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" />
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

  1. Set the custom tooltip style to the XamDataChart control.

In XAML:

<ig:XamDataChart x:Name="DataChart"
                 ToolTipStyle="{StaticResource ToolTipStyle}">
        <!--TODO: Add Series with custom tooltip content -->
</ig:XamDataChart>

  1. Add custom tooltip content to the ToolTip property of the Series object.

In XAML:

<ig:XamDataChart.Series>
    <ig:LineSeries ItemsSource="{Binding}"
                   ValueMemberPath="Volume"
                   XAxis="{Binding ElementName=commonXAxis}"
                   YAxis="{Binding ElementName=volumeYAxis}">
            <!--Simple Tooltip showing volume on LineSeries -->
        <ig:LineSeries.ToolTip>
            <StackPanel Orientation="Vertical">
                <TextBlock Text="{Binding Series.Title}" FontWeight="Bold" />
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Value:" />
                    <TextBlock Text="{Binding Item.Volume}"/>
                </StackPanel>
            </StackPanel>
        </ig:LineSeries.ToolTip>
    </ig:LineSeries>
    <ig:FinancialPriceSeries DisplayType="Candlestick"
                             ItemsSource="{Binding}"
                             OpenMemberPath="Open"
                             CloseMemberPath="Close"
                             HighMemberPath="High"
                             LowMemberPath="Low"
                             VolumeMemberPath="Volume"
                             XAxis="{Binding ElementName=commonXAxis}"
                             YAxis="{Binding ElementName=priceYAxis}">
            <!--Complex Tooltip showing all (OHLC) values on FinancialPriceSeries  -->
        <ig:FinancialPriceSeries.ToolTip>
            <StackPanel Orientation="Vertical">
                <TextBlock Text="{Binding Series.Title}" FontWeight="Bold" />
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Open:" Width="40" />
                    <TextBlock Text="{Binding Item.Open}" />
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="High:" Width="40" />
                    <TextBlock Text="{Binding Item.High}" />
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Low:" Width="40" />
                    <TextBlock Text="{Binding Item.Low}" />
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Close:" Width="40" />
                    <TextBlock Text="{Binding Item.Close}" />
                </StackPanel>
            </StackPanel>
        </ig:FinancialPriceSeries.ToolTip>
    </ig:FinancialPriceSeries>
</ig:XamDataChart.Series>

Related Content

Topic Purpose

This article explains how navigation works in the XamDataChart.

This article explains how to synchronize zooming, panning, etc. across multiple charts.

This article describes the various series types that the XamDataChart supports.

This article explains the requirements for all the series types.