Vue Chart - valueAxis.strips

Declares a collection of strips belonging to the value axis.

Type:

Array<Object>

Cannot be used in themes.

A strip is a colored piece of the chart's background that highlights a range of values. Strips allow a viewer to see whether a certain series point falls in or out of a range.

DevExtreme HTML5 Charts Strips

Each object in the strips array configures a single strip. To limit a strip, set its startValue and endValue options. You may set only one of them, in which case the strip will not have a limit at one end. Note that setting the color option is also necessary for a strip to be displayed.

See Also
  • valueAxis.stripStyle - specifies the appearance of those strips that belong to the value axis.
  • commonAxisSettings.stripStyle - specifies the appearance of all strips in the widget.

color

Specifies the color of the strip.

Type:

String

Default Value: undefined

This option supports the following colors:

endValue

Along with the startValue option, limits the strip.

Type:

Number

|

Date

|

String

Default Value: undefined

label

Configures the strip label.

Type:

Object

Setting the text option is necessary for a strip label to be displayed.

See Also
  • valueAxis.stripStyle.label - specifies a unified style for the labels of those strips that belong to the value axis.
  • commonAxisSettings.stripStyle.label - specifies a unified style for the labels of all strips in the widget.

paddingLeftRight

Generates a pixel-measured empty space between the left/right border of a strip and the strip label.

Type:

Number

Default Value: 10

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

  • horizontalAlignment is "left" → padding applies to the left border of a strip;
  • horizontalAlignment is "right" → padding applies to the right border of a strip;
  • horizontalAlignment is "center" → padding is calculated automatically.

DevExtreme HTML5 Charts StripPadding

See Also
  • commonAxisSettings.stripStyle.label.horizontalAlignment - aligns strip labels in the horizontal direction. Applies to all strips.
  • argumentAxis.stripStyle.label.horizontalAlignment - aligns strip labels in the horizontal direction. Applies to the strips belonging to the argument axis.
  • valueAxis.stripStyle.label.horizontalAlignment - aligns strip labels in the horizontal direction. Applies to the strips belonging to the value axis.

paddingTopBottom

Generates a pixel-measured empty space between the top/bottom border of a strip and the strip label.

Type:

Number

Default Value: 5

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

  • verticalAlignment is "top" → padding applies to the top border of a strip;
  • verticalAlignment is "bottom" → padding applies to the bottom border of a strip;
  • verticalAlignment is "center" → padding is calculated automatically.

DevExtreme HTML5 Charts StripPadding

See Also
  • commonAxisSettings.stripStyle.label.verticalAlignment - aligns strip labels in the vertical direction. Applies to all strips.
  • argumentAxis.stripStyle.label.verticalAlignment - aligns strip labels in the vertical direction. Applies to the strips belonging to the argument axis.
  • valueAxis.stripStyle.label.verticalAlignment - aligns strip labels in the vertical direction. Applies to the strips belonging to the value axis.

startValue

Along with the endValue option, limits the strip.

Type:

Number

|

Date

|

String

Default Value: undefined