Series Point Labels

  • 6 minutes to read

Labels can accompany series points to provide additional information. The following image demonstrates labels that show the series point's actual value:

WPF_SeriesPointLabel

This document consists of the following sections:

How to Display Series Labels

Series labels are hidden by default. Set the Series.LabelsVisibility property to true to show labels containing point values.

<dxc:LineSeries2D DisplayName="series" LabelsVisibility="True">
       <!-- Other series settings here. -->
</dxc:LineSeries2D>

How to Set a Series Label Text Pattern

Specify the SeriesLabel.TextPattern property to format series label text. The pattern comprises regular text (which is displayed as is) and placeholder strings enclosed in braces. Placeholders define which values are shown in labels. You can also apply format specifiers to these values (e.g., {V:F1}).

In the following image, series labels display points values with the series display name:

WPF_SeriesLabelTextPattern

The code below shows how to assign the {}{S}: ${V:F1} M string to the TextPattern property.

<dxc:BarSideBySideSeries2D DisplayName="series" 
                           LabelsVisibility="True">
      <dxc:BarSideBySideSeries2D.Label>
            <dxc:SeriesLabel TextPattern="{}{S}: ${V:F1} M"
                             dxc:BarSideBySideSeries2D.LabelPosition="Outside" 
                             ResolveOverlappingMode="Default"
                             Indent="15"/>
      </dxc:BarSideBySideSeries2D.Label>
      <!--...-->
</dxc:BarSideBySideSeries2D>

Note: In XAML, insert empty brackets into the beginning of a pattern if it starts with a placeholder.

Below is a list of available placeholders.

Pattern Description
{S} Displays the name of the series.
{A} Displays a series point argument.
{V} Displays series point values.
A Pie (Donut) series specific placeholders
{VP} Displays series point values as percentages.
{TV} Displays total group value.
Stacked series specific placeholders
{VP} Displays series point values as percentages.
{G} Displays the name of a stacked group.
{TV} Displays total group value.
A Bubble series specific placeholders
{W} Displays the weight.
Range series specific placeholders
{V1} Displays the first value.
{V2} Displays the second value.
{VD} Displays the duration between the first and second data point values formatted using a common time format (e.g. HH:MM:SS for date time values and #.## for numeric values).
{VDTD} Displays the duration between the first and second date-time data point values in days.
{VDTH} Displays the duration between the first and second date-time data point values in hours.
{VDTM} Displays the duration between the first and second date-time data point values in minutes in minutes.
{VDTS} Displays the duration between the first and second date-time data point values in seconds.
{VDTMS} Displays the duration between the first and second date-time data point values in milliseconds.
Financial series specific placeholders
{OV} Displays the open value.
{HV} Displays the high value.
{LV} Displays the low value.
{CV} Displays the close value.

Before specifying a series's {S} placeholder, make sure a series name is specified in the Series.DisplayName property.

When the Chart control or a series is bound to data, the pattern may contain data field values in addition to placeholders. For example, the data source contains the Discount field and the pattern may look like: {S}: {V:F2} (Discount: {Discount:P0}).

How to Resolve Series Label Overlapping

The possibility that series labels overlap increases with the number of series points you have on a chart. The Chart control provides several algorithms to resolve these overlapping problems using the SeriesLabel.ResolveOverlappingMode property. The following table describes the various algorithms used to resolve label overlapping and shows an image with the result:

The Property Value The Resulting Image Description
SeriesLabel.ResolveOverlappingMode = Default WPF_ResolveOverlappingDefault The default algorithm changes label positions to avoid overlapping.
SeriesLabel.ResolveOverlappingMode = HideOverlapped WPF_ResolveOverlappingHideOverlapped Some labels are automatically hidden to avoid overlapping if two or more labels overlap.
SeriesLabel.ResolveOverlappingMode = JustifyAroundPoint WPF_ResolveOverlappingJustifyAroundPoint Only labels that overlap change their positions. They are moved around their corresponding points, but their indents from the point center do not change.
SeriesLabel.ResolveOverlappingMode = JustifyAllAroundPoint WPF_ResolveOverlappingJustifyAllAroundPoint All labels (not only overlapped) change their positions. They are moved around their corresponding points, but their indents from the point center do not change.
SeriesLabel.ResolveOverlappingMode = None WPF_ResolveOverlappingNone No attempt is made to resolve labels' overlapping issues.

You can also adjust the gap between series labels using the LabelsResolveOverlappingMinIndent properties:

Use the following markup to set the Default overlapping mode, and specify minimal space between labels to 10:

<dxc:XYDiagram2D LabelsResolveOverlappingMinIndent="10">
      <dxc:LineSeries2D DisplayName="series" 
                        LabelsVisibility="True">
            <dxc:LineSeries2D.Label>
                  <dxc:SeriesLabel ResolveOverlappingMode="Default"/>
            </dxc:LineSeries2D.Label>
            <!--...-->
      </dxc:LineSeries2D>
</dxc:XYDiagram2D>

The following table lists the classes and properties that are used to resolve overlapping labels:

Class or Property Description
XYDiagram2D.LabelsResolveOverlappingMinIndent Specifies the minimal distance between series labels.
SeriesLabel.ResolveOverlappingMode Specifies the resolve overlapping mode.

How to Show Labels for Zero Values

The Chart control does not display labels for points with zero values by default. To show them, use the BarSeries2D.ShowZeroValueLabels attached property as demonstrated in the example below:

<dxc:BarSideBySideSeries2D>
    <dxc:BarSideBySideSeries2D.Label>
        <dxc:SeriesLabel Visible="True" 
                         dxc:BarSeries2D.ShowZeroValueLabels="True"/>
    </dxc:BarSideBySideSeries2D.Label>
    <!-- ...  -->
</dxc:BarSideBySideSeries2D>

The results of the code are on the following image:

ZeroValueLabels

How to Modify Labels' Layout

Use the LabelPosition attached property to define labels' position.

In the following image, Pie series labels are positioned in two columns:

pie-series-labels-two-columns

The following code demonstrates how to accomplish this:

<dxc:PieSeries2D DisplayName="series" LabelsVisibility="True">
      <dxc:PieSeries2D.Label>
            <dxc:SeriesLabel dxc:PieSeries.LabelPosition="TwoColumns" 
                             ResolveOverlappingMode="Default"/>
            <!--...-->
      </dxc:PieSeries2D.Label>
</dxc:PieSeries2D>

 

You can set an angle that specifies how a label is tilted relative to a series point. The MarkerSeries2D.Angle property defines this angle (measured in degrees) and counterclockwise from the horizontal. A value of 0 is to the left, 90 is up, 180 is to the right, etc.

The table shows the Angle property in action:

The property value Image
MarkerSeries2D.Angle = 0 WPF_SeriesLabelAngle0
MarkerSeries2D.Angle = 90 WPF_SeriesLabelAngle90

Use the following markup to set a label's tilt angle:

<dxc:LineSeries2D DisplayName="series" LabelsVisibility="True">
      <dxc:LineSeries2D.Label>
            <dxc:SeriesLabel dxc:MarkerSeries2D.Angle="90"/>
      </dxc:LineSeries2D.Label>
      <!--...-->
</dxc:LineSeries2D>

How to Customize Label Appearance

You can change the label text settings, or label shape using a DataTemplate class instance. The following image shows an example:

SeriesLabelAppearance

The code example below customizes the Side-by-Side Bar series labels using data templates:

<Window.Resources>
      <DataTemplate x:Key="seriesLabel">
            <Border BorderThickness="1" 
                    Opacity="1.0" 
                    BorderBrush="DarkGray">
                <Border.Background>
                    <SolidColorBrush Color="{Binding Path=Color}"/>
                </Border.Background>
                <Label Content="{Binding Path=Text}" 
                       Padding="5,1" 
                       Foreground="Black"
                       FontFamily="SegoeUI"
                       FontStyle="Normal"
                       FontSize="10"
                       FontWeight="Light"
                       FontStretch="Normal"
                       Background="White"/>
            </Border>
      </DataTemplate>
</Window.Resources>
<!--...-->
<dxc:BarSideBySideSeries2D DisplayName="series" 
                           LabelsVisibility="True">
      <dxc:BarSideBySideSeries2D.Label>
            <dxc:SeriesLabel dxc:BarSideBySideSeries2D.LabelPosition="Outside"                                             
                             ResolveOverlappingMode="Default"
                             Indent="15"
                             ConnectorThickness="1"  
                             ElementTemplate="{StaticResource seriesLabel}"/>
      <!--...-->
</dxc:BarSideBySideSeries2D>

The markup above uses the following properties:

Property

Description

SeriesLabel.Indent

Specifies the length of the connector that joins a label and a series point.

SeriesLabel.ConnectorThickness

Defines label connector visibility.

ChartTextElement.ElementTemplate

Defines the template that specifies how to display series labels.

Foreground, FontFamily, FontStyle, FontSize, FontWeight and FontStretch

(inherited from System.Windows.Controls.Control)

Customize label text.

See Also