Constant Lines

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

ConstantLine

Add a Constant Line to an Axis

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

axis-constant-line

XAML

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

<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
  1. Use the ConstantLine.Visible property to specify a constant line's visibility.
  2. 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 at runtime:

ConstantLine constantLine = new ConstantLine() {
    Value = 1110,
    Title = new ConstantLineTitle() {
        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 http://www.devexpress.com/example=T541777.

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

ConstantLineLegendText

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.

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

ConstantLineTitle

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

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

constanLineAppearance

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

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

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

*

See Also