Vue Chart - valueAxis.constantLines

Declares a collection of constant lines belonging to the value axis.

Type:

Array<Object>

Cannot be used in themes.

DevExtreme HTML5 Charts ConstantLines

Each object in the constantLines array configures a single constant line. Setting the value property is necessary for a constant line to be displayed.

View Demo

See Also
  • valueAxis.constantLineStyle - specifies the appearance of those constant lines that belong to the value axis.
  • commonAxisSettings.constantLineStyle - specifies the appearance of all constant lines in the UI component.

color

Specifies the color of constant lines.

Type:

String

Default Value: '#000000'

This property supports the following colors:

dashStyle

Specifies the dash style of constant lines.

Type:

String

Default Value: 'solid'
Accepted Values: 'dash' | 'dot' | 'longDash' | 'solid'

The following dash styles are available:

  • solid
    The border is a solid, continuous line.

  • longDash
    The border is displayed using long dashes.

  • dash
    The border is displayed using dashes.

  • dot
    The border is displayed using dots.

  • Any combination of 'longDash', 'dash' and 'dot'
    The border is displayed by repeating the specified combination. For instance, 'dashdotdash'.

Use the DashStyle enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Solid, LongDash, Dash, and Dot.

displayBehindSeries

Specifies whether to display the constant line behind or in front of the series.

Type:

Boolean

Default Value: false

DevExtreme Chart - Display constant lines behind series

extendAxis

Specifies whether to extend the axis's default visual range to display the constant line.

Type:

Boolean

Default Value: false

The default visual range equals the data range. A constant line outside visual range is not displayed. Set this property to true to extend the range and display the constant line.

label

Configures the constant line label.

Type:

Object

The constant line label displays the value of the constant line.

DevExtreme HTML5 Charts ConstantLine ConstantLineLabel

The label object specifies the following characteristics of the constant line label.

  • Visibility
    By default, the constant line label is visible. To hide it, assign false to the visible property.
  • Text
    By default, the constant line label displays the value of the constant line. To assign a custom text to the constant line label, use the text property.
  • Position
    The constant line label can be located inside or outside the chart plot. Use the position property to change this setting.
  • Alignment
    To align the constant line label in the horizontal and vertical directions, use the horizontalAlignment and verticalAlignment properties.
  • Font
    To change the font of the constant line label, use the fields of the font object.
See Also
  • valueAxis.constantLineStyle.label - specifies a unified style for the labels of those constant lines that belong to the value axis.
  • commonAxisSettings.constantLineStyle.label - specifies a unified style for the labels of all constant lines in the UI component.

paddingLeftRight

Generates a pixel-measured empty space between the left/right side of a constant line and the constant line label.

Type:

Number

Default Value: 10

This property depends on the label.horizontalAlignment in the following way.

  • horizontalAlignment is "left" → padding applies to the left side of a constant line;
  • horizontalAlignment is "right" → padding applies to the right side of a constant line;
  • horizontalAlignment is "center" → padding is calculated automatically.

DevExtreme HTML5 Charts ConstantLinePadding

See Also
  • argumentAxis.constantLineStyle.label.horizontalAlignment - aligns constant line labels in the horizontal direction. Applies to the constant lines belonging to the argument axis.
  • valueAxis.constantLineStyle.label.horizontalAlignment - aligns constant line labels in the horizontal direction. Applies to the constant lines belonging to the value axis.

paddingTopBottom

Generates a pixel-measured empty space between the top/bottom side of a constant line and the constant line label.

Type:

Number

Default Value: 10

This property depends on the label.verticalAlignment in the following way.

  • verticalAlignment is "top" → padding applies to the top side of a constant line;
  • verticalAlignment is "bottom" → padding applies to the bottom side of a constant line;
  • verticalAlignment is "center" → padding is calculated automatically.

DevExtreme HTML5 Charts ConstantLinePadding

See Also
  • argumentAxis.constantLineStyle.label.verticalAlignment - aligns constant line labels in the vertical direction. Applies to the constant lines belonging to the argument axis.
  • valueAxis.constantLineStyle.label.verticalAlignment - aligns constant line labels in the vertical direction. Applies to the constant lines belonging to the value axis.

value

Specifies the value indicated by a constant line. Setting this property is necessary.

Type:

Number

|

Date

|

String

Default Value: undefined

width

Specifies the width of constant lines in pixels.

Type:

Number

Default Value: 1