How to: Provide a Custom Tooltip for a Series Point

  • 6 minutes to read

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.

<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>