Constant Lines

Sep 02, 2022
5 minutes to read

A constant line is a vertical or horizontal straight line that passes through the chart and indicates an x- or y-axis‘s value. The constant line is perpendicular to its axis. The Chart Control allows you to draw any number of constant lines over or under series, and change constant line’s appearance. Note that you can only add constant lines to the 2D XY Diagram‘s axes.

Add a Constant Line to an Axis

The following image shows the y-axis’s and x-axis’s constant lines:

XAML

Use the following notation to create the constant lines from the image above:

XAML

xaml

<dxc:XYDiagram2D.AxisY> 
      <dxc:AxisY2D>
            <!-- The y-axis's collection of constant lines that are in front of series. -->
            <dxc:AxisY2D.ConstantLinesInFront>
                  <!-- Create a constant line and define its value. -->
                  <dxc:ConstantLine Value="1160">
                        <!-- Specify the constant line's title. -->
                        <dxc:ConstantLine.Title>
                              <dxc:ConstantLineTitle Content="$1160"/>
                        </dxc:ConstantLine.Title>
                  </dxc:ConstantLine>
            </dxc:AxisY2D.ConstantLinesInFront>
            <!--...-->
      </dxc:AxisY2D>
</dxc:XYDiagram2D.AxisY>
<dxc:XYDiagram2D.AxisX>
    <dxc:AxisX2D>
        <!-- The x-axis's collection of constant lines that are behind series. -->
        <dxc:AxisX2D.ConstantLinesBehind>
            <!-- Create a constant line and define its value. -->
            <dxc:ConstantLine Value="05/15/2015">
                <!-- Specify the constant line's title. -->
                <dxc:ConstantLine.Title>
                    <dxc:ConstantLineTitle Content="May 15, 2015"/>
                </dxc:ConstantLine.Title>
            </dxc:ConstantLine>
        </dxc:AxisX2D.ConstantLinesBehind>
        <!--...-->
    </dxc:AxisX2D>
</dxc:XYDiagram2D.AxisX>

Use the following members to add constant lines to a chart:

Member	Description
Axis2D.ConstantLinesInFront	The collection of constant lines that are drawn over series.
Axis2D.ConstantLinesBehind	The collection of constant lines that are drawn under series.
ConstantLine	A constant line.
ConstantLine.Value	Specifies the value that the constant line identifies.
ConstantLine.Title	Gets or sets the constant line’s title.
ConstantLineTitle	A constant line’s title.
TitleBase.Content	Specifies the constant line title’s content.

Note

Use the ConstantLine.Visible property to specify a constant line’s visibility.
The Chart Control automatically calculates axes’ ranges based on all series‘ and indicators‘ data. You can extend the axis’s range to plot a constant line through a value that is out of the automatically calculated range. Refer to the Whole and Visual Ranges help document for more information about ranges.

At Runtime

The code below shows how to add a Y-axis constant line at runtime:

C#
VB.NET

csharp

XYDiagram2D diagram = (XYDiagram2D)chartControl1.Diagram;
AxisY2D yAxis = new AxisY2D();
diagram.AxisY = yAxis;

ConstantLine constantLine = new ConstantLine() {
    Value = 1110,
    Title = new ConstantLineTitle() {
        Content = "Y-axis constant line"
    }
};
yAxis.ConstantLinesInFront.Add(constantLine);

Dim diagram As XYDiagram2D = CType(chartControl1.Diagram, XYDiagram2D)
Dim yAxis As AxisY2D = New AxisY2D()
diagram.AxisY = yAxis

Dim constantLine As New ConstantLine() With { _
    Key .Value = 1110, _
    Key .Title = New ConstantLineTitle() With { _
        Key .Content = "Y-axis constant line" _
    } _
}
yAxis.ConstantLinesInFront.Add(constantLine)

The MVVM Design Pattern’s Use

To generate constant lines from a ViewModel, bind an axis’s ConstantLineItemsSource (Axis2D.ConstantLineBehindItemsSource, Axis2D.ConstantLineInFrontItemsSource) to a collection of objects that contain constant line settings. Use the ConstantLineItemTemplate (Axis2D.ConstantLineBehindItemTemplate, Axis2D.ConstantLineInFrontItemTemplate) or ConstantLineItemTemplateSelector (Axis2D.ConstantLineBehindItemTemplateSelector, Axis2D.ConstantLineInFrontItemTemplateSelector) property to specify how to display constant lines.

The example below shows how to create a constant line for a y-secondary axis.

Tip

A complete sample project is available in the DevExpress Code Examples database at https://supportcenter.devexpress.com/ticket/details/t541777/chart-for-wpf-bind-a-chart-to-its-view-model.

XAML

xaml

<dxc:XYDiagram2D.SecondaryAxisYItemTemplate>
    <DataTemplate>
        <dxc:SecondaryAxisY2D Alignment="Near" GridLinesMinorVisible="True" GridLinesVisible="True"
              ConstantLineInFrontItemsSource="{Binding ConstantLines}">            
            <dxc:SecondaryAxisY2D.ConstantLineInFrontItemTemplate>
                <DataTemplate>
                    <dxc:ConstantLine Title="{Binding Title}" Value="{Binding Value}"/>
                </DataTemplate>
            </dxc:SecondaryAxisY2D.ConstantLineInFrontItemTemplate>
            <!-- ... -->
        </dxc:SecondaryAxisY2D>
    </DataTemplate>
</dxc:XYDiagram2D.SecondaryAxisYItemTemplate>

Use the following properties to generate constant lines from a ViewModel:

Property	Description
Axis2D.ConstantLineBehindItemsSource	Gets or sets the objects’ collection to generate constant lines that are drawn under series.
Axis2D.ConstantLineInFrontItemsSource	Gets or sets the objects’ collection to generate constant lines that are drawn over series.
Axis2D.ConstantLineBehindItemTemplate	Specifies the DataTemplate that defines how to convert a model object to a constant line that is under series.
Axis2D.ConstantLineInFrontItemTemplate	Specifies the DataTemplate that defines how to convert a model object to a constant line that is over series.
Axis2D.ConstantLineBehindItemTemplateSelector	Gets or sets the custom logic to select a data template that converts a model object to a constant line that is drawn under series.
Axis2D.ConstantLineInFrontItemTemplateSelector	Gets or sets the custom logic to select a data template that converts a model object to a constant line that is drawn over series.

Show a Constant Line in a Legend

You can display a constant line’s marker with the specified text in the chart legend.

Define the ConstantLine.LegendText property to display a constant line in a legend. A chart’s legend does not show a constant line if its LegendText property is not specified.

XAML

xaml

<dxc:AxisY2D>
      <dxc:AxisY2D.ConstantLinesInFront>
            <dxc:ConstantLine Value="1051.07" 
                              LegendText="Minimal Price">
                  <dxc:ConstantLine.Title>
                        <dxc:ConstantLineTitle Content="$1051.07"/>
                  </dxc:ConstantLine.Title>
            </dxc:ConstantLine>
      </dxc:AxisY2D.ConstantLinesInFront>
      <!--..-->
</dxc:AxisY2D>

Customize Constant Line Appearance

Constant Line’s Title

You can modify the constant line title’s position and appearance as follows:

Use the code below to display the constant line’s title as in the previous image.

XAML

xaml

<Window.Resources>
      <DataTemplate x:Key="constantLineTitle">
                  <Label BorderThickness="1" 
                         BorderBrush="DarkGray" 
                         Margin="1">
                        <TextBlock Text="{Binding}"
                                   Foreground="Black" 
                                   Margin="1,2"/>
                  </Label>
      </DataTemplate>
</Window.Resources>
<!--...-->
      <dxc:AxisY2D>
            <dxc:AxisY2D.ConstantLinesInFront>
                  <dxc:ConstantLine Value="1170">
                        <dxc:ConstantLine.Title>
                              <dxc:ConstantLineTitle Content="$1170"
                                     ShowBelowLine="True"
                                     Alignment="Far"
                                     ContentTemplate="{StaticResource constantLineTitle}"/>                                      
                        </dxc:ConstantLine.Title>
                  </dxc:ConstantLine>
              </dxc:AxisY2D.ConstantLinesInFront>
      <!--...-->
      </dxc:AxisY2D>

The code above uses the following classes and properties:

Member	Description
ConstantLineTitle	A constant line title.
TitleBase.Content	The title’s content.
TitleBase.ContentTemplate	Specifies how to display the title’s content.
ConstantLineTitle.Alignment	Specifies the title’s alignment.
ConstantLineTitle.ShowBelowLine	Specifies whether to show the title below the constant line.

Constant Line’s Style

You can change the constant line’s style (for example, thickness or color).

Use the following markup to modify a constant line’s style:

XAML

xaml

<dxc:AxisY2D>
      <dxc:AxisY2D.ConstantLinesInFront>
            <dxc:ConstantLine Value="1150" 
                              Brush="DarkGray">
                  <dxc:ConstantLine.LineStyle>
                        <dxc:LineStyle Thickness="2" >
                              <dxc:LineStyle.DashStyle>
                                    <DashStyle Dashes="2 1 5"/>
                              </dxc:LineStyle.DashStyle>
                        </dxc:LineStyle>
                  </dxc:ConstantLine.LineStyle>
                  <dxc:ConstantLine.Title>
                        <dxc:ConstantLineTitle Content="$1150"/>
                  </dxc:ConstantLine.Title>
            </dxc:ConstantLine>
      </dxc:AxisY2D.ConstantLinesInFront>
      <!--...-->
</dxc:AxisY2D>

The markup above uses the following members:

Member	Description
ConstantLine.LineStyle	Stores the constant line’s options.
ConstantLine.Brush	Gets or sets the brush that is used to paint the constant line.
LineStyle	The line style’s options.

End-User Capabilities

The following options allow users to modify constant lines at runtime:

The RuntimeDeletion property specifies whether a user can delete a constant line with the Delete key.
The RuntimeMoving property specifies whether a user can move a constant line.
Use an instance of the EditableTextContent class to allow users to edit the constant line title.
XAML

xaml

<dxc:AxisY2D>
      <dxc:AxisY2D.ConstantLinesInFront>
            <dxc:ConstantLine RuntimeMoving="True" RuntimeDeletion="True" Value="53">
                  <dxc:ConstantLine.Title>
                  <dxc:ConstantLineTitle>
                        <dxc:ConstantLineTitle.Content>
                              <dxc:EditableTextContent Text="Optimal temperature">
                              </dxc:EditableTextContent>
                        </dxc:ConstantLineTitle.Content>
                  </dxc:ConstantLineTitle>
                  </dxc:ConstantLine.Title>
            </dxc:ConstantLine>
      </dxc:AxisY2D.ConstantLinesInFront>
      ...
</dxc:AxisY2D>