Skip to main content

How to: Provide a Custom Template for Series Labels

The following example demonstrates how to change the appearance of series labels.

To accomplish this, it is necessary to create a DataTemplate that specifies the appearance of series labels, and add it to a window’s resource. Then, this template can be applied to a series label via its ChartTextElement.ElementTemplate property.


The chart control displays a crosshair cursor instead of series labels in the diagram by default. To provide series labels customization, enable series labels (set the Series.LabelsVisibility property to true) and disable the crosshair cursor (set the ChartControlBase.CrosshairEnabled property to false).

View Example

<Window x:Class="CustomLabelTemplate.Window1" 
        Title="Window1" Height="331" Width="488">
            <DataTemplate x:Key="template">
                <Border BorderThickness="1" CornerRadius="9" Opacity="1.0">
                        <SolidColorBrush Color="{Binding Path=Color}"/>
                    <Label Content="{Binding Path=Text}" Padding="5,1,5,1.5" 
                           Foreground="White" FontSize="10" />
        <dxc:ChartControl  CrosshairEnabled="False">
                        <dxc:BarSideBySideSeries2D LabelsVisibility="True" ColorEach="True">
                                <dxc:SeriesPoint Argument="A" Value="10" />
                                <dxc:SeriesPoint Argument="B" Value="20" />
                                <dxc:SeriesPoint Argument="C" Value="30" />
                                <dxc:SeriesPoint Argument="D" Value="40" />
                                <dxc:SeriesPoint Argument="E" Value="50" />
                                <dxc:SeriesLabel ConnectorVisible="False" ElementTemplate="{StaticResource template}" />