Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Series.ToolTipPointTemplate Property

Specifies the tooltip template for this series. This is a dependency property.

Namespace: DevExpress.Xpf.Charts

Assembly: DevExpress.Xpf.Charts.v24.2.dll

NuGet Package: DevExpress.Wpf.Charts

#Declaration

public DataTemplate ToolTipPointTemplate { get; set; }

#Property Value

Type Description
DataTemplate

A DataTemplate object.

#Example

This example shows how to implement a custom tooltip that displays another chart with a GDP history for the selected country when hovering over a bar.

To accomplish this, it is necessary to create the DataTemplate object that specifies the custom tooltip appearance, and assign it to the Series.ToolTipPointTemplate property.

You also need to bind both charts to the GDP datasource and write the GetDataSource() and GetGDPs() methods. These methods allow you to get the GDP data from a datasource for each selected country to display it on a chart tooltip.

View Example

<Window x:Class="ToolTipPointTemplate.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
        Title="MainWindow" Height="500" Width="800" >
    <Grid>
        <dxc:ChartControl Name="chart" Width="758" Height="440"  
                          ToolTipEnabled="True" CrosshairEnabled="False">
            <dxc:ChartControl.ToolTipController>
                <dxc:ChartToolTipController ToolTipOpening="ChartToolTipController_ToolTipOpening" />
            </dxc:ChartControl.ToolTipController>
            <dxc:XYDiagram2D>
                <dxc:BarSideBySideSeries2D ColorEach="True" DisplayName="G8 GDP in 2010"
                                           ArgumentDataMember="CountryName"
                                           ValueDataMember="GDPin2010"                                              
                                           ValueScaleType="Numerical"
                                           ToolTipHintDataMember="ToolTipData">

                    <dxc:BarSideBySideSeries2D.ToolTipPointTemplate>
                        <DataTemplate>
                            <dxc:ChartControl Width="300" Height="150" EnableAnimation="True" 
                                              DataSource="{Binding Hint.GDPs}">
                                <dxc:XYDiagram2D>
                                    <dxc:LineSeries2D ArgumentDataMember="Year"
                                                      ValueDataMember="Product"
                                                      ArgumentScaleType="Numerical"
                                                      ValueScaleType="Numerical"
                                                      Brush="{Binding Hint.SeriesBrush}"
                                                      MarkerSize="5">
                                    </dxc:LineSeries2D>
                                    <dxc:XYDiagram2D.AxisX>
                                        <dxc:AxisX2D>
                                            <dxc:AxisX2D.Range>
                                                <dxc:AxisRange MinValue="2000" MaxValue="2011"/>
                                            </dxc:AxisX2D.Range>
                                        </dxc:AxisX2D>
                                    </dxc:XYDiagram2D.AxisX>
                                    <dxc:XYDiagram2D.AxisY>
                                        <dxc:AxisY2D MinorCount="1">
                                            <dxc:AxisY2D.Range >
                                                <dxc:AxisRange />
                                            </dxc:AxisY2D.Range>
                                        </dxc:AxisY2D>
                                    </dxc:XYDiagram2D.AxisY>
                                </dxc:XYDiagram2D>
                                <dxc:ChartControl.Titles>
                                    <dxc:Title Margin="0" Padding="0" Dock="Top" FontSize="14"
                                               HorizontalAlignment="Center" VerticalAlignment="Top" 
                                               Content="{Binding Hint.Title}" />
                                </dxc:ChartControl.Titles>
                            </dxc:ChartControl>
                        </DataTemplate>
                    </dxc:BarSideBySideSeries2D.ToolTipPointTemplate>
                </dxc:BarSideBySideSeries2D>
            </dxc:XYDiagram2D>
        </dxc:ChartControl>
    </Grid>
</Window>

The following code snippet (auto-collected from DevExpress Examples) contains a reference to the ToolTipPointTemplate property.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

See Also