Chart Tooltips

This topic explains, with code examples, how to disable the default tooltips in the XamFinancialChart control and how to create custom ones.

Introduction

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

Tooltips Overview

The XamFinancialChart control provides default tooltips for each series of data. The default tooltips display all the information relevant to the particular item (time, open, high, low, close, and volume) and are styled to match the series' style. Default tooltips are displayed by setting the TooltipType property to Default.

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

When using Default tooltips the structure of the tooltip may be customized by providing custom content to the ToolTipStyle property of the XamFinancialChart control.

In addition the series added event can be used to update the tooltip property on an individual series to have greater control over which tooltip is used by each series.

The following screenshot demonstrates the default tooltip for the XamFinancialChart.

Code Example: Displaying Custom Tooltips

This example demonstrates how to display tooltip information about the open, high, low, and close sales volumes for any data point.

Preview

Figure 1: The XamFinancialChart control with custom tooltip.

Steps

Change the content of the tooltips property:

In XAML:

<ig:XamFinancialChart ToolTipType="Item" ZoomSliderType="Area" YAxisAbbreviateLargeNumbers="False" >
    <ig:XamFinancialChart.ItemsSource>
        <local:StockPriceData />
    </ig:XamFinancialChart.ItemsSource>
    <ig:XamFinancialChart.ToolTips>
        <col:ArrayList>
            <StackPanel>
                <StackPanel Margin="0,5,5,5">
                    <TextBlock Text="{Binding Item.Label}"/>
                    <TextBlock Foreground="{Binding Series.ActualBrush}" Text="{Binding Series.Title}" />
                </StackPanel>
                <UniformGrid Columns="2">
                    <TextBlock Text="Open:" />
                    <TextBlock Text="{Binding Item.Open}"/>
                    <TextBlock Text="High:" />
                    <TextBlock Text="{Binding Item.High}" />
                    <TextBlock Text="Low:" />
                    <TextBlock Text="{Binding Item.Low}" />
                    <TextBlock Text="Close:" />
                    <TextBlock Text="{Binding Item.Close}" />
                    <TextBlock Text="Volume:" />
                    <TextBlock Text="{Binding Item.Volume}" />
                </UniformGrid>
            </StackPanel>
        </col:ArrayList>
        </ig:XamFinancialChart.ToolTips>
</ig:XamFinancialChart>

Disabling Tooltips

To disable the tooltips, you should set ToolTipType to None so the tooltip will not display.