How to: Customize the Appearance of a Series Tooltip

• Jun 07, 2019

This example demonstrates how to change the appearance of a series tooltip via its template.

To do this, you need to create a DataTemplate object that specifies the appearance of series tooltips and assign it to the Series.ToolTipSeriesTemplate property. In this example, this has been done for the first series.

Note that before tooltip customization, you need to set the ChartControl.ToolTipEnabled and ToolTipOptions.ShowForSeries properties to true to show the tooltip for a series.

It is also necessary to specify a display name for each series displayed on the tooltip via the Series.DisplayName property.

View Example

MainWindow.xaml

<Window x:Class="ToolTipSeriesTemplate.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="350" Width="525" >
    <Grid>
        <dxc:ChartControl ToolTipEnabled="True" CrosshairEnabled="False">
            <dxc:ChartControl.ToolTipOptions>
                <dxc:ToolTipOptions ShowForPoints="False" ShowForSeries="True" />
            </dxc:ChartControl.ToolTipOptions>
            <dxc:XYDiagram2D>
                <dxc:LineSeries2D DisplayName="Series1">
                    <dxc:LineSeries2D.Points>
                        <dxc:SeriesPoint Argument="A" Value="2" />
                        <dxc:SeriesPoint Argument="B" Value="4" />
                        <dxc:SeriesPoint Argument="C" Value="5" />
                        <dxc:SeriesPoint Argument="D" Value="7" />
                        <dxc:SeriesPoint Argument="E" Value="9" />
                        <dxc:SeriesPoint Argument="F" Value="11" />
                    </dxc:LineSeries2D.Points>
                    <dxc:LineSeries2D.ToolTipSeriesTemplate>
                        <DataTemplate>
                            <Grid>
                                <Border Background="Bisque"/>
                                <Label Foreground="Green" FontStyle="Italic" 
                                       FontSize="14" Content="{Binding Path=ToolTipText}" />
                            </Grid>
                        </DataTemplate>
                    </dxc:LineSeries2D.ToolTipSeriesTemplate>
                </dxc:LineSeries2D>
                <dxc:LineSeries2D DisplayName="Series2">
                    <dxc:LineSeries2D.Points>
                        <dxc:SeriesPoint Argument="A" Value="3" />
                        <dxc:SeriesPoint Argument="B" Value="5" />
                        <dxc:SeriesPoint Argument="C" Value="6" />
                        <dxc:SeriesPoint Argument="D" Value="6" />
                        <dxc:SeriesPoint Argument="E" Value="7" />
                        <dxc:SeriesPoint Argument="F" Value="8" />
                    </dxc:LineSeries2D.Points>
                </dxc:LineSeries2D>
            </dxc:XYDiagram2D>
        </dxc:ChartControl>
    </Grid>
</Window>